width: 500px;
height: 500px;
background:
radial-gradient(circle at 50% -33.33333333333333%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 70.3%, rgb(17 24 39 / 1) 70.9%, rgb(17 24 39 / 1) 100%) 12px 290px / 304px 114px no-repeat no-repeat, /* G - lower circular contour */
linear-gradient(-35deg, rgb(41 88 255 / 1) 57.95%, rgb(41 88 255 / 0) 100%) 222px 272px / 90px 87px no-repeat no-repeat, /* G - blue ribbon transition */
linear-gradient(-26deg, rgb(41 88 255 / 1) 50.85%, rgb(41 88 255 / 0) 61.93%) 143px 310px / 118px 48px no-repeat no-repeat, /* G - blue ribbon transition (copy) */
linear-gradient(248deg, rgb(131 36 255 / 0) 38.64%, rgb(129 35 255 / 1) 41.48%) 364px 129px / 16px 21px no-repeat no-repeat, /* A - rounded magenta crown (copy) (copy) */
linear-gradient(111deg, rgb(131 36 255 / 0) 38.64%, rgb(129 35 255 / 1) 41.48%) 280px 139px / 16px 21px no-repeat no-repeat, /* A - rounded magenta crown (copy) */
radial-gradient(circle at 50% 50%, rgb(129 35 255 / 1) 69.9%, rgb(0 0 0 / 0) 71.1%, rgb(0 0 0 / 0) 100%) 289px 103px / 85px 85px no-repeat no-repeat, /* A - rounded magenta crown */
linear-gradient(90deg, rgb(92 64 255 / 1) 0%, rgb(129 33 255 / 1) 100%) 164px 210px / 124px 80px no-repeat no-repeat, /* G - horizontal crossbar */
linear-gradient(117.22867917709127deg, rgb(0 0 0 / 0) 35%, rgb(129 35 255 / 1) 35%, rgb(129 35 255 / 1) 64.68%, rgb(0 0 0 / 0) 64.92%) 180px 150px / 198px 206px no-repeat no-repeat, /* A - rising violet stroke */
radial-gradient(circle at 50% 50%, rgb(91 63 255 / 1) 0%, rgb(91 63 255 / 1) 69.9%, rgb(0 0 0 / 0) 71.1%, rgb(0 0 0 / 0) 100%) 124px 210px / 80px 80px no-repeat no-repeat, /* G - rounded crossbar terminal */
radial-gradient(circle at 50% 50%, rgb(12 237 222 / 1) 0%, rgb(12 237 222 / 1) 69.9%, rgb(0 0 0 / 0) 71.1%, rgb(0 0 0 / 0) 100%) 188px 120px / 80px 80px no-repeat no-repeat, /* G - rounded turquoise terminal */
radial-gradient(circle at 50% 50%, rgb(17 24 39 / 1) 0%, rgb(17 24 39 / 1) 33.3%, rgb(0 0 0 / 0) 33.9%, rgb(0 0 0 / 0) 100%) 12px 100px / 304px 304px no-repeat no-repeat, /* G - inner counter */
radial-gradient(circle at 50% 50%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 70.3%, rgb(17 24 39 / 1) 70.9%, rgb(17 24 39 / 1) 100%) 12px 100px / 304px 304px no-repeat no-repeat, /* G - circular outer contour */
conic-gradient(from 0deg at 50% 50%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 10%, rgb(17 24 39 / 1) 10.1%, rgb(17 24 39 / 1) 25%, rgb(0 0 0 / 0) 25.1%, rgb(0 0 0 / 0) 100%) 12px 100px / 304px 304px no-repeat no-repeat, /* G - open upper-right sector */
radial-gradient(circle at 28.7894736842105% 25.0526315789474%, rgb(13 224 239 / 1) 0%, rgb(13 239 222 / 1) 37%, rgb(13 239 219 / 1) 49%, rgb(10 190 170 / 1) 56.6%, rgb(0 0 0 / 0) 57.1%, rgb(0 0 0 / 0) 100%) 12px 100px / 304px 304px no-repeat no-repeat, /* G - curved cyan and mint sweep */
linear-gradient(180deg, rgb(150 27 255 / 1) 0%, rgb(108 54 255 / 1) 38%, rgb(23 99 255 / 1) 100%) 12px 100px / 304px 304px no-repeat no-repeat, /* G - violet to blue foundation */
radial-gradient(circle at 50% 50%, rgb(13 232 225 / 1) 0%, rgb(13 232 225 / 1) 69.9%, rgb(0 0 0 / 0) 71.1%, rgb(0 0 0 / 0) 100%) 404px 318px / 80px 80px no-repeat no-repeat, /* A - rounded cyan foot */
linear-gradient(152.56027205180072deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 81.74%, rgb(17 24 39 / 1) 81.94%, rgb(17 24 39 / 1) 100%) 290px 150px / 200px 248px no-repeat no-repeat, /* A - cyan descending stroke - end contour */
linear-gradient(-62deg, rgb(0 0 0 / 0) 33.81%, rgb(18 23 38 / 1) 91.48%) 322px 143px / 106px 191px no-repeat no-repeat, /* A - shadow */
linear-gradient(62.5602720518007deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0) 39.33%, rgb(13 232 225 / 1) 39.57%, rgb(13 232 225 / 1) 66.75%, rgb(0 0 0 / 0) 66.99%, rgb(0 0 0 / 0) 100%) 290px 150px / 200px 248px no-repeat no-repeat, /* A - cyan descending stroke */
linear-gradient(rgb(17 24 39 / 1), rgb(17 24 39 / 1)) 0px 0px / 500px 500px no-repeat no-repeat; /* Canvas background */ Comments (0)
GradientArt Logo
Yoav Kadosh
A CSS-gradient recreation of the GradientArt symbol. Built from editable circular, conic, and diagonal gradient layers on a dark canvas; no images, SVG, or text.
Colors
Views
5
Layers
20
Layers (20)
G - lower circular contour
radial
G - blue ribbon transition
linear
G - blue ribbon transition (copy)
linear
A - rounded magenta crown (copy) (copy)
linear
A - rounded magenta crown (copy)
linear
A - rounded magenta crown
radial
G - horizontal crossbar
linear
A - rising violet stroke
linear
G - rounded crossbar terminal
radial
G - rounded turquoise terminal
radial
G - inner counter
radial
G - circular outer contour
radial
G - open upper-right sector
conic
G - curved cyan and mint sweep
radial
G - violet to blue foundation
linear
A - rounded cyan foot
radial
A - cyan descending stroke - end contour
linear
A - shadow
linear
A - cyan descending stroke
linear
Canvas background
solid
GRADIENT
.ART
css