Shingles

Designed by
Yoav Kadosh

Keywords:

Colors:

Layers
4
Views
347
Open in Editor

Layers

Shadow
(conic)
Shadow
(conic)
Shingles
(conic)
Background
(linear)

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 */