Comments (0)

CSS

width: 500px;
height: 500px;
background:
  conic-gradient(from 0deg at 50% 50%, rgba(69,255,144,0) 25%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 75%) 0px 0px / 100px 100px repeat repeat, /* Shadow */
  conic-gradient(from 0deg at 50% 50%, rgba(69,255,144,0) 25%, rgba(0,0,0,0.5) 25%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0) 75%) 50px 50px / 100px 100px repeat repeat, /* Shadow */
  conic-gradient(from 0deg at 50% 50%, rgba(255,69,69,1) 0%,  25%, rgba(255,69,69,0) 25%,  50%, rgba(255,69,69,1) 50%,  75%, rgba(255,69,69,0) 75%) 0px 0px / 100px 100px repeat repeat, /* Shingles */
  linear-gradient(0deg, rgba(231,50,50,1) 0%,  50%, rgba(231,50,50,1) 100%) 0px 0px / 100px 100px repeat repeat; /* Background */