GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
--color-1: rgb(232 51 51);
--color-2: rgb(255 69 69);
--shadow-size: 5;
width: 500px;
height: 500px;
background:
conic-gradient(transparent 25%, rgb(0 0 0 / 0.5) 25%, transparent calc((25 + var(--shadow-size)) / 1 * 1%), transparent calc((75 - var(--shadow-size)) / 1 * 1%), 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 calc((25 + var(--shadow-size)) / 1 * 1%), transparent calc((75 - var(--shadow-size)) / 1 * 1%), rgb(0 0 0 / 0.5) 75%, transparent 75%) 50px 50px / 100px 100px, /* Shadow */
conic-gradient(var(--color-2) 0%, 25%, transparent 25%, 50%, var(--color-2) 50%, 75%, transparent 75%) 0 0 / 100px 100px, /* Shingles */
linear-gradient(var(--color-1), var(--color-1)) 0 0 / 100px 100px; /* Background */
} Comments (0)
Customize
Try different values. Your changes stay in this preview and never change the saved project.
#
#
<iframe
src="https://gra.dient.art/embed/jzxjb65uaj"
title="Shingles | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (4)
Shadow
conic
Shadow
conic
Shingles
conic
Background
linear
GRADIENT
.ART
css