GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 500px;
height: 500px;
background:
radial-gradient(ellipse, rgb(0 0 0 / 0.5) 0%, transparent 60.42%) 61px 443px / 383px 35px no-repeat, /* Shadow */
radial-gradient(circle at 50% 100%, transparent 41%, rgb(85 53 16) 43%, rgb(85 53 16) 58%, transparent 59%) 257px 135px / 100px 40px no-repeat, /* Right Eye */
radial-gradient(circle at 50% 100%, transparent 41%, rgb(85 53 16) 43%, rgb(85 53 16) 58%, transparent 59%) 141px 135px / 100px 40px no-repeat, /* Left Eye */
linear-gradient(rgb(79 47 0), rgb(79 47 0)) 102px 217px / 296px 11px no-repeat, /* Line */
linear-gradient(0deg, transparent 6.94%, rgb(0 0 0 / 0.4) 100%) 246px 224px / 8px 184px no-repeat, /* Line */
linear-gradient(0deg, transparent 6.6%, rgb(0 0 0 / 0.4) 100%) 324px 222px / 8px 156px no-repeat, /* Line */
linear-gradient(0deg, transparent 4.51%, rgb(0 0 0 / 0.4) 100%) 171px 222px / 8px 156px no-repeat, /* Line */
radial-gradient(circle at 50% 21%, rgb(255 255 255) 49%, rgb(79 47 0) 49.1%, rgb(79 47 0) 53%, transparent 53.1%) 7px 217px / 487px 208px no-repeat, /* Teeth */
radial-gradient(ellipse, transparent 53%, rgb(79 47 0 / 0.32) 53%, rgb(79 47 0 / 0.28) 56%, rgb(255 255 255) 56.1%) 0 0 / 500px 500px no-repeat, /* Mask */
linear-gradient(90deg, rgb(249 255 69) 0%, rgb(255 176 69) 100%) 0 0 / 500px 500px no-repeat, /* Gradient */
linear-gradient(rgb(255 255 255), rgb(255 255 255)) 0 0 / 100px 100px; /* Background */
} Comments (0)
<iframe
src="https://gra.dient.art/embed/4917350crh"
title="Grinning Emoji | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (11)
Shadow
radial
Right Eye
radial
Left Eye
radial
Line
solid
Line
linear
Line
linear
Line
linear
Teeth
radial
Mask
radial
Gradient
linear
Background
solid
GRADIENT
.ART
css