GRADIENT
.ART
css
Sign In
<div id="root">
<div class="ga-definitions ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="position:absolute;inset:0;pointer-events:none" aria-hidden="true">
<defs>
<g id="ga-mask-2-content">
<g fill="rgb(69 168 255 / 1)" stroke="none" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M1.1243545740563365 257.54661353136856l-0.12435523863858629-232.9718407532573 40.000000569991-23.094011170611715 129.1243577556916 74.54998514211086 128.2916531786465-75.03074731912207 40.00000226707107 23.094011170611715-0.2916516940913021 234.02995343210807-168.00000375162628 96.99484869716328-40.000000569991-23.094012951205777v-96.67136283235477l-52.78023194192585-30.4726807811589 0.11551345151446607 50.55003264167876-39.25955605344795 23.521508656888038zM258.1243585756646 212.74095004746835v-5.616987239262686l-48.00000034457319 28.229474138605156v5.758183006502284z" transform="matrix(0.5892473916033572 0 0 0.5616103198436468 0 0)"/>
</g>
</g>
<mask id="ga-mask-2" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" style="mask-type:alpha">
<g style="transform: translate(79.87564219321413px, 88.06921410910364px) scale(calc(max(0, 339.41601244223557) / max(0.000001, 500)), calc(max(0, 356.1188121608596) / max(0.000001, 500))); transform-box: view-box; opacity: 1;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<use href="#ga-mask-2-content"/>
</svg>
</g>
</mask>
</defs>
</svg>
</div>
<div class="shape-layer-3 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(79.87564219321413px, 88.06921410910364px) scale(calc(max(0, 339.41601244223557) / max(0.000001, 500)), calc(max(0, 356.1188121608596) / max(0.000001, 500))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<use href="#ga-mask-2-content"/>
</svg>
</g>
</svg>
</div>
<div class="gradient-layer ga-shared"></div>
<div class="shape-layer-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(79.87564398915792px, 111.64399206407694px) scale(calc(max(0, 299.12435636870214) / max(0.000001, 500)), calc(max(0, 332.54402966978756) / max(0.000001, 500))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(0 0 0 / 0.42)" stroke="none" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M0.9999996445326444 0.9999998025006117l169.12435621518313 97.64399226129845v232.90003780348795l-39.99999924190181-23.094010642862166v-95.81197893560507l-92.00000020068249-53.97560720677765v96.67136083243966l-37.00000030830388-21.36196005248752zM38.124356417131466 112.47441179631781l92.00000020068249 53.11622364722291-0.8327053745027566-44.33339496601341-91.16729482617973-52.635461418089z" transform="matrix(0.6686182376719568 0 0 0.6014241187808955 0 0)"/>
<path d="M298.1243567241695 115.6431955887987v-46.18802294844448l-40.0000007375236 23.094012305582314zM298.1243567241695 160.45517295783154v50.99999990385209l-40.0000007375236-21.9093208744434v-5.996668386546528z" transform="matrix(0.6686182376719568 0 0 0.6014241187808955 0 0)"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="shape-layer ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(116.33528189268418px, 110.99484457619322px) scale(calc(max(0, 302.6647177573159) / max(0.000001, 500)), calc(max(0, 333.1931776066408) / max(0.000001, 500))); transform-box: view-box;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible" role="img" aria-label="shape">
<g fill="rgb(0 0 0 / 0.14)" stroke="none" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M133.66471911691437 99.29313959857726l167.99999895290213-98.29314024235356v234.19833253224763l-167.99999895290213 96.99484636194572zM173.6647187234793 120.91114444686112v46.18802128379993l87.99999973977226-50.80682341217992v-46.18802128379993zM173.6647187234793 211.9111441720245v51.000000486726805l87.99999973977226-50.80682341217992v-51.000000486726805z" transform="matrix(0.66079720649952 0 0 0.6002523864282564 0 0)"/>
<path d="M40.99999929406433 232.50515475739934v-50.310652123678764l-39.33528130013195-22.88292110212494-0.6647183064329724 96.28758386770366zM1.6647179939323777 69.27092659709025v43.85263198473955l37.84494660998263-22.002842968419525z" transform="matrix(0.66079720649952 0 0 0.6002523864282564 0 0)"/>
</g>
</svg>
</g>
</svg>
</div>
</div>#root {
width: 500px;
height: 500px;
position: relative;
isolation: isolate;
overflow: hidden;
}
#root .ga-paint {
position: absolute;
inset: 0;
pointer-events: none;
}
#root .ga-shared {
position: absolute;
inset: 0;
isolation: isolate;
}
#root .gradient-layer {
mask-image: url("#ga-mask-2");
mask-mode: alpha;
background: linear-gradient(90deg, rgb(21 103 144) 0%, rgb(37.963 105.2222 133.3333) 19.07%, rgb(80.3704 110.7778 106.6667) 35.26%, rgb(135.5 118 72) 50%, rgb(190.6296 125.2222 37.3333) 64.74%, rgb(233.037 130.7778 10.6667) 80.93%, rgb(250 133 0) 100%) 76px 78px / 354px 368px no-repeat;
} Comments (0)
<iframe
src="https://gra.dient.art/embed/pw0ij681fs"
title="AB Logo | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (5)
Shape layer
shape
Shape layer
shape
Gradient layer
linear
Clipped to base layer
Shape layer
shape
Guides layer
guides
GRADIENT
.ART
css