GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 800px;
height: 800px;
background:
radial-gradient(ellipse at 30% 30%, transparent 0%, rgb(0 0 0 / 0.2) 100%) 0 0 / 100px 100px, /* Shadow */
linear-gradient(rgb(0 0 0), rgb(0 0 0)) 500px 600px / 100px 100px no-repeat, /* Mouth */
linear-gradient(rgb(0 0 0), rgb(0 0 0)) 200px 600px / 100px 100px no-repeat, /* Mouth */
linear-gradient(rgb(0 0 0), rgb(0 0 0)) 300px 300px / 200px 100px no-repeat, /* Nose */
linear-gradient(rgb(0 0 0), rgb(0 0 0)) 200px 400px / 400px 200px no-repeat, /* Mouth */
conic-gradient(from -90deg, rgb(7 50 0) 75%, rgb(0 0 0) 75%) 500px 100px / 200px 200px no-repeat, /* Right Eye */
conic-gradient(from -180deg, rgb(7 50 0) 75%, rgb(0 0 0) 75%) 100px 100px / 200px 200px no-repeat, /* Left Eye */
linear-gradient(0deg, transparent 98%, rgb(0 0 0 / 0.11) 98%) 0 -1px / 100px 100px, /* Grid Horizontal */
linear-gradient(90deg, transparent 98%, rgb(0 0 0 / 0.1) 98%) 1px 0 / 100px 100px, /* Grid Vertical */
conic-gradient(rgb(255 255 255 / 0.5) 25%, rgb(83 184 83 / 0.5) 25%, rgb(83 184 83 / 0.5) 50%, rgb(35 112 33 / 0.5) 50%, rgb(35 112 33 / 0.5) 75%, rgb(0 167 67 / 0.5) 75%) 100px 100px / 400px 400px, /* Background */
conic-gradient(rgb(153 255 114 / 0.5) 25%, rgb(15 163 20 / 0.5) 25%, rgb(15 163 20 / 0.5) 50%, rgb(27 128 28 / 0.5) 50%, rgb(27 128 28 / 0.5) 75%, rgb(35 102 44 / 0.5) 75%) 0 0 / 400px 400px, /* Background */
conic-gradient(rgb(22 201 52) 25%, rgb(15 163 20) 25%, rgb(15 163 20) 50%, rgb(27 128 28) 50%, rgb(27 128 28) 75%, rgb(26 95 35) 75%) 0 0 / 200px 200px; /* Background */
} Comments (0)
<iframe
src="https://gra.dient.art/embed/cq6tfdt0ci"
title="Minecraft Creeper | GradientArt"
width="800"
height="800"
style="border: 0; max-width: 100%; aspect-ratio: 800 / 800; height: auto;"
loading="lazy"
></iframe>Layers (12)
Shadow
radial
Mouth
solid
Mouth
solid
Nose
solid
Mouth
solid
Right Eye
conic
Left Eye
conic
Grid Horizontal
linear
Grid Vertical
linear
Background
conic
Background
conic
Background
conic
GRADIENT
.ART
css