Comments (0)
CSS
width: 500px; height: 500px; background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 51%) 0px 355px / 500px 120px no-repeat no-repeat, /* Circular bottom mask */ linear-gradient(0deg, rgba(0,0,0,1) 19.5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(0,0,0,1) 80.5%) 0px 0px / 500px 500px no-repeat no-repeat, /* Top/bottom mask */ linear-gradient(-110deg, rgba(0,0,0,0) 42%, rgba(0,0,0,0.4) 45.5%, rgba(229,9,19,1) 46%, rgba(229,9,19,1) 54%, rgba(0,0,0,0.4) 54.5%, rgba(0,0,0,0) 58%) 0px 0px / 500px 500px no-repeat no-repeat, /* Diagonal */ linear-gradient(90deg, rgba(0,0,0,1) 32.5%, rgba(255,255,255,0) 33%, rgba(0,0,0,0) 43.5%, rgba(0,0,0,1) 44%, rgba(0,0,0,1) 56%, rgba(0,0,0,0) 56.5%, rgba(255,255,255,0) 67%, rgba(0,0,0,1) 67.5%) 0px 0px / 500px 500px no-repeat no-repeat, /* Mask */ linear-gradient(rgba(169,0,8,1), rgba(169,0,8,1)) 0px 0px / 500px 500px no-repeat no-repeat; /* Background */

Colors

Views

984

Forks

0

Layers

5
Open in editor
Layers (5)
Circular bottom mask
radial
Top/bottom mask
linear
Diagonal
linear
Mask
linear
Background
solid