GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 500px;
height: 500px;
background:
radial-gradient(ellipse, transparent 60%, rgb(255 255 255) 60.2%) 0 0 / 500px 500px no-repeat, /* Mask */
radial-gradient(ellipse, transparent 51%, rgb(210 79 127) 51.1%) 0 0 / 500px 500px no-repeat, /* Outer Rim */
radial-gradient(circle at 0 79%, transparent 44%, rgb(210 79 127) 44.1%, rgb(210 79 127) 50%, transparent 50.1%) -8px -30px / 500px 500px no-repeat, /* Rim (copy) */
radial-gradient(circle at 50% 100%, transparent 43%, rgb(249 166 196) 43.1%, rgb(249 166 196) 44%, rgb(210 79 127) 44.1%, rgb(210 79 127) 51%, transparent 51.1%) 112px 39px / 500px 500px no-repeat, /* Rim */
radial-gradient(circle at 50% 0, transparent 44%, rgb(210 79 127) 44.1%, rgb(210 79 127) 50%, rgb(249 166 196) 50.1%, rgb(249 166 196) 51%, transparent 51.1%) -109px -36px / 500px 500px no-repeat, /* Rim */
radial-gradient(circle at 0 79%, transparent 44%, rgb(210 79 127) 44.1%, rgb(210 79 127) 50%, rgb(249 166 196) 50.1%, rgb(249 166 196) 51%, transparent 51.1%) -8px -30px / 500px 500px no-repeat, /* Rim */
radial-gradient(ellipse, rgb(249 166 196) 46%, transparent 47%) 53px 76px / 399px 202px no-repeat, /* Oval */
linear-gradient(325deg, rgb(244 112 161) 0%, rgb(254 153 188) 100%) 38px 43px / 405px 413px no-repeat; /* Background */
} Comments (0)
<iframe
src="https://gra.dient.art/embed/l2doje1afa"
title="Dribbble Logo | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (8)
Mask
radial
Outer Rim
radial
Rim (copy)
radial
Rim
radial
Rim
radial
Rim
radial
Oval
radial
Background
linear
GRADIENT
.ART
css