GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 500px;
height: 500px;
background:
radial-gradient(ellipse, transparent 38%, rgb(255 255 255) 38%, rgb(255 255 255) 45%, transparent 45%) 0 0 / 500px 500px no-repeat, /* Circle */
linear-gradient(66deg, transparent 36%, rgb(0 0 0 / 0.2) 37%, rgb(255 255 255) 38%, rgb(255 255 255) 61%, rgb(0 0 0 / 0.2) 62%, transparent 63%) 220px 258px / 120px 120px no-repeat, /* Diagonal */
linear-gradient(114deg, transparent 36%, rgb(0 0 0 / 0.2) 37%, rgb(255 255 255) 38%, rgb(255 255 255) 61%, rgb(0 0 0 / 0.2) 62%, transparent 63%) 163px 258px / 120px 120px no-repeat, /* Diagonal */
linear-gradient(68deg, transparent 36%, rgb(0 0 0 / 0.2) 37%, rgb(255 255 255) 38%, rgb(255 255 255) 55%, rgb(0 0 0 / 0.2) 56%, transparent 57%) 110px 171px / 120px 190px no-repeat, /* Diagonal */
linear-gradient(112deg, transparent 36%, rgb(0 0 0 / 0.2) 37%, rgb(255 255 255) 38%, rgb(255 255 255) 55%, rgb(0 0 0 / 0.2) 56%, transparent 57%) 281px 171px / 120px 190px no-repeat, /* Diagonal */
linear-gradient(66deg, transparent 36%, rgb(0 0 0 / 0.2) 37%, rgb(255 255 255) 38%, rgb(255 255 255) 61%, rgb(0 0 0 / 0.2) 62%, transparent 63%) 159px 121px / 120px 130px no-repeat, /* Diagonal */
linear-gradient(114deg, transparent 36%, rgb(0 0 0 / 0.2) 37%, rgb(255 255 255) 38%, rgb(255 255 255) 61%, rgb(0 0 0 / 0.2) 62%, transparent 63%) 218px 121px / 120px 130px no-repeat, /* Diagonal */
radial-gradient(ellipse, transparent 34%, rgb(0 0 0 / 0.2) 37%, rgb(255 255 255) 37.5%, rgb(255 255 255) 45.5%, rgb(0 0 0 / 0.2) 46%, transparent 48%) 0 0 / 500px 500px no-repeat, /* Circle */
radial-gradient(ellipse, transparent 55%, rgb(255 255 255) 55.2%) 0 0 / 500px 500px no-repeat, /* Circle Mask */
radial-gradient(ellipse at 39% 37%, rgb(141 184 227) 0%, rgb(1 45 95) 63.7%) 0 0 / 500px 500px no-repeat; /* Background */
} Comments (0)
<iframe
src="https://gra.dient.art/embed/tsmpxj6llj"
title="Volkswagen Logo | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (10)
Circle
radial
Diagonal
linear
Diagonal
linear
Diagonal
linear
Diagonal
linear
Diagonal
linear
Diagonal
linear
Circle
radial
Circle Mask
radial
Background
radial
GRADIENT
.ART
css