<div class="snow"></div>
body {
margin:0;
height:100vh;
display:grid;
place-items:center;
background:#faf0e6;
}
.snow {
width:300px;
height:200px;
position:relative;
box-sizing:border-box;
border:15px solid #904928;
background:
linear-gradient(to bottom left,#0000 49%,#fbfbfb 51%,#e0fbfe 65%)bottom left/140% 50%,
linear-gradient(to bottom right,#0000 49%,#fbfbfb 51%,#e0fbfe 65%)bottom right/160% 44%,
conic-gradient(from 150deg at 20% 17%,#0000 10deg, #3335 40deg 60deg,#0000 0),
conic-gradient(from 150deg at top, #92c7e6 75deg,#0000 0) 13% 35%/11% 15%,
conic-gradient(from 140deg at top, #92c7e6 70deg,#0000 0) 18% 30.5%/9% 10%,
conic-gradient(from 150deg at top, #92c7e6 60deg,#0000 0) 24% 32%/4% 7%,
conic-gradient(from 150deg at 20% 49%, #fff 60deg,#0000 0) 0 0/100% 35% ,
conic-gradient(from 150deg at 20% 17%, #92c7e6 60deg,#0000 0),
conic-gradient(from 150deg at 43% 30%,#0000 10deg, #3335 40deg 60deg,#0000 0),
conic-gradient(from 150deg at top, #92c7e6 66deg,#0000 0) 39% 49%/6% 15%,
conic-gradient(from 140deg at top, #92c7e6 70deg,#0000 0) 42% 44.5%/9% 10%,
conic-gradient(from 150deg at top, #92c7e6 60deg,#0000 0) 47% 44%/4% 7%,
conic-gradient(from 150deg at 43% 66%, #fff 60deg,#0000 0) 0 0/100% 46% ,
conic-gradient(from 150deg at 43% 30%, #92c7e6 60deg,#0000 0),
radial-gradient(circle at 75% 25%,#feffff,#c0def8 60%);
background-repeat:no-repeat;
}
.snow:before {
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 6px;
border: 2px solid #000;
top: -34px;
background: radial-gradient(farthest-side,grey 98%,#0000) 0 0/8px 8px no-repeat;
left: calc(50% - 25px);
transform: rotate(45deg);
z-index: -1;
}
.snow:after {
content: "";
position: absolute;
inset:-15px;
background:
linear-gradient(45deg,#aa6342 50%,#c69781 0) 0 0 /15px 15px,
linear-gradient(45deg,#944b29 50%,#aa6342 0) 100% 100%/15px 15px,
linear-gradient(-45deg,#944b29 50%,#aa6342 0) 0 100%/15px 15px,
linear-gradient(-45deg,#aa6342 50%,#c69781 0) 100% 0 /15px 15px,
linear-gradient(#c69781 0 0) top /calc(100% - 30px) 15px,
linear-gradient(#944b29 0 0) bottom/calc(100% - 30px) 15px,
linear-gradient(#aa6342 0 0) left /15px calc(100% - 30px),
linear-gradient(#aa6342 0 0) right/15px calc(100% - 30px);
background-repeat: no-repeat;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.