<div class="box shadow"></div>
.box {
width: 150px;
height: 150px;
border: 2px solid green;
position: relative;
transform: translate(0);
transform-style: preserve-3d;
}
.shadow:before {
content:"";
position: absolute;
inset: 0;
transform: translate3d(0,0,-1px);
background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
filter: blur(10px);
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0);
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: repeating-linear-gradient(-45deg, #fff 0 20px, #f9f9f9 0 40px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.