<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.