GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 500px;
height: 500px;
background:
linear-gradient(150deg, transparent 20%, rgb(0 0 0) 20%, rgb(0 0 0) 80%, transparent 80%) 298px 379px / 10px 30px no-repeat, /* usb */
linear-gradient(150deg, transparent 14.29%, rgb(154 153 153) 14.29%, rgb(154 153 153) 81.43%, transparent 81.63%) 264px 122px / 48px 360px no-repeat, /* right */
linear-gradient(196deg, transparent 27.35%, rgb(255 255 255) 27.55%, rgb(255 255 255) 77.76%, rgb(255 255 255) 77.96%, transparent 77.96%) 104px 37px / 160px 469px no-repeat, /* left */
linear-gradient(330deg, rgb(216 216 216) 44.49%, rgb(255 255 255) 44.49%, transparent 44.49%) 104px 66px / 48px 90px no-repeat, /* top_02 */
linear-gradient(16deg, rgb(216 216 216) 44.49%, rgb(255 255 255) 44.49%, transparent 44.49%) 152px 88px / 160px 65px no-repeat, /* top_01 */
linear-gradient(rgb(216 216 216), rgb(216 216 216)) 158px 153px / 154px 34px no-repeat, /* top_00 */
linear-gradient(rgb(0 0 0), rgb(0 0 0)) 0 0 / 500px 500px no-repeat; /* bg */
} Comments (2)
David Yushkov
3 years ago
i had some errors to save changes i've made, so final result on CodePen https://codepen.io/fleple/pen/VwdBYPE
Yoav Kadosh
3 years ago
Very cool! You can't make skewed circles with pure gradients... The closest you can get is an ellipse. I should add support for elements and allow transforms to be applied on them 😁
<iframe
src="https://gra.dient.art/embed/1k9ii2jjtw"
title="X Box Series S | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (7)
usb
linear
right
linear
left
linear
top_02
linear
top_01
linear
top_00
solid
bg
solid
GRADIENT
.ART
css