Shingles

#root {
  width: 500px;
  height: 500px;
  background:
    conic-gradient(transparent 25%, rgb(0 0 0 / 0.5) 25%, transparent 30%, transparent 70%, rgb(0 0 0 / 0.5) 75%, transparent 75%) 0 0 / 100px 100px, /* Shadow */
    conic-gradient(transparent 25%, rgb(0 0 0 / 0.5) 25%, transparent 30%, transparent 70%, rgb(0 0 0 / 0.5) 75%, transparent 75%) 50px 50px / 100px 100px, /* Shadow */
    conic-gradient(rgb(255 69 69) 0%,  25%, transparent 25%,  50%, rgb(255 69 69) 50%,  75%, transparent 75%) 0 0 / 100px 100px, /* Shingles */
    linear-gradient(rgb(231 50 50), rgb(231 50 50)) 0 0 / 100px 100px; /* Background */
}

Forked from

Colors

Views

Code size

Layers

Explore

Community

Social