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="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M388.53549820419374 271.5230128317937L388.53549820419374 179.14696911140567 82.573970849288 2.4999997465339825 2.5739716113777846 48.688021606728 2.499999426291026 141.02135772470302 254.80576107427132 286.69015743804715 310.34166064699895 254.6264908422655 364.4057280239528 285.8403967423236Z" transform="matrix(0.5114625173722545 0 0 0.6915864701174673 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(194.73225175889357px, 108.0594005535124px) scale(calc(max(0, 195.5177488152422) / max(0.000001, 500)), calc(max(0, 144.59507859229055) / 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>
<g id="ga-mask-6-content">
<g fill="rgb(69 168 255 / 1)" stroke="none" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M41.000000160000006 1.0000005249319193L0.9999998439024385 24.09401074307148 1.0000002539024402 205.65727785815037 41.000000160000006 228.75128807628994 81.00000006609757 204.99395142526535 81.00000047609758 24.09401074307148Z" transform="matrix(2.4390243807257583 0 0 0.8705065430433299 0 0)"/>
</g>
</g>
<mask id="ga-mask-6" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" style="mask-type:alpha">
<g style="transform: translate(142.99999984000002px, 138.3427221663631px) scale(calc(max(0, 82.00000032) / max(0.000001, 500)), calc(max(0, 229.75128860122192) / 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-6-content"/>
</svg>
</g>
</mask>
<g id="ga-mask-10-content">
<g fill="rgb(69 168 255 / 1)" stroke="none" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M196.9282033371299 23.572616777094304L196.9282033371299 70.80342713649324 40.805695758341706 160.94079858519953 0.9999995871212967 137.81537565495802 0.9999995871212967 91.34016729592422 157.8312850916582 0.9999998144939554Z" transform="matrix(1.010467417200477 0 0 1.2350192291035325 0 0)"/>
</g>
</g>
<mask id="ga-mask-10" maskUnits="objectBoundingBox" maskContentUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" style="mask-type:alpha">
<g style="transform: translate(192.07179676972453px, 234.3726458624711px) scale(calc(max(0, 197.92820292425102) / max(0.000001, 500)), calc(max(0, 161.94079839969342) / 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-10-content"/>
</svg>
</g>
</mask>
</defs>
</svg>
</div>
<div class="bottom-bar ga-shared">
<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(192.07179676972453px, 234.3726458624711px) scale(calc(max(0, 197.92820292425102) / max(0.000001, 500)), calc(max(0, 161.94079839969342) / 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-10-content"/>
</svg>
</g>
</svg>
</div>
<div class="gradient-layer-copy-copy ga-shared"></div>
<div class="bottom-shadow-3 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(192.82308546376024px, 281.6270911048609px) scale(calc(max(0, 196.17691422787394) / max(0.000001, 500)), calc(max(0, 113.68635300588647) / 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.3)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M40.05440773009217 113.68635300588647L0 90.56093047925413 156.85613262888205 0 196.17691422787397 23.548981498299316Z" transform="matrix(1.019487949370461 0 0 1.759226105086196 0 0)"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="left-shadow-3 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(192.82308546376024px, 235.37264576871536px) scale(calc(max(0, 157.15444204807895) / max(0.000001, 500)), calc(max(0, 136.81537576645474) / 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.15)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M0 136.81537576645474L0.4974228826539487 90.34016742814241 157.07999563156415 0 157.15444204807895 46.08221643257638Z" transform="matrix(1.2726334514859792 0 0 1.4618240009909564 0 0)"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
<div class="left-bar ga-shared">
<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(142.99999984000002px, 138.3427221663631px) scale(calc(max(0, 82.00000032) / max(0.000001, 500)), calc(max(0, 229.75128860122192) / 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-6-content"/>
</svg>
</g>
</svg>
</div>
<div class="gradient-layer-copy ga-shared"></div>
<div class="left-shadow-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(144px, 139.3427220735493px) scale(calc(max(0, 40) / max(0.000001, 500)), calc(max(0, 204.6572779264507) / 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.15)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M80.00000000000001 0L0 46.188022511365986 0 409.3145558529014 80.00000000000001 361.97778590081595Z" transform="matrix(2.4999999999999996 0 0 0.4886217632384312 0 0)"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="bottom-shadow-2 ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(143.99999984000002px, 320.33161507461864px) scale(calc(max(0, 80.00000032) / max(0.000001, 500)), calc(max(0, 46.762395593471695) / 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.3)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M0 23.668385074469544L40.000000160000006 0 80.00000032000001 23.005058154856368 40.000000160000006 46.76239559347172Z" transform="matrix(2.4999999899999996 0 0 4.276940850907156 0 0)"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
<div class="top-bar ga-shared">
<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(194.73225175889357px, 108.0594005535124px) scale(calc(max(0, 195.5177488152422) / max(0.000001, 500)), calc(max(0, 144.59507859229055) / 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="bottom-shadow ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(195.98225206887335px, 155.49742298671987px) scale(calc(max(0, 193.01774793589342) / max(0.000001, 500)), calc(max(0, 95.90705516049184) / 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.3)" stroke="none" stroke-width="0" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M40.03698624133724 0L0 23.115364503958247 126.15288037226645 95.90705516049199 153.92082857848217 79.87522270869391 180.76217481886812 95.37208177052456 193.01774793589362 88.32348338367133Z" transform="matrix(1.0361741453248403 0 0 2.0853523201741275 0 0)"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="left-shadow ga-paint">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="display:block;overflow:visible">
<g style="transform: translate(194.98225150705323px, 108.29829407782825px) scale(calc(max(0, 42.0369863311893) / max(0.000001, 500)), calc(max(0, 71.31449298184347) / 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.15)" stroke="none" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M41.01774852265124 0.9999999898161371L41.03698632907585 47.19912848410439 1.000000002113472 70.31449299202735 1.0000002122984037 24.08376397618144Z" transform="matrix(4.757714989944703 0 0 2.8044790285604297 0 0)"/>
</g>
</svg>
</g>
</svg>
</div>
</div>
</div>#root {
--color-1: rgb(69 255 143);
--color-2: rgb(69 168 255);
--bottom-shadow: rgb(0 0 0 / 0.3);
--left-shadow: rgb(0 0 0 / 0.15);
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-copy-copy {
mask-image: url("#ga-mask-10");
mask-mode: alpha;
background: linear-gradient(330deg, var(--color-1) 22.44%, var(--color-2) 79.26%) 186px 224px / 217px 185px no-repeat;
}
#root .gradient-layer-copy {
mask-image: url("#ga-mask-6");
mask-mode: alpha;
background: linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%) 126px 126px / 106px 267px no-repeat;
}
#root .gradient-layer {
mask-image: url("#ga-mask-2");
mask-mode: alpha;
background: linear-gradient(30deg, var(--color-1) 21.31%, var(--color-2) 80.4%) 172px 103px / 235px 159px no-repeat;
} Comments (0)
Customize
Try different values. Your changes stay in this preview and never change the saved project.
#
#
#
#
<iframe
src="https://gra.dient.art/embed/kqdtc8gcmy"
title="Isometric Ribbon Logo | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (16)
Guides layer
guides
Top bar
Folder
Left shadow
shape
Bottom shadow
shape
Gradient layer
linear
Clipped to base layer
Shape layer
shape
Left bar
Folder
Bottom shadow
shape
Left shadow
shape
Gradient layer (copy)
linear
Clipped to base layer
Shape layer
shape
Bottom bar
Folder
Left shadow
shape
Bottom shadow
shape
Gradient layer (copy) (copy)
linear
Clipped to base layer
Shape layer
shape
GRADIENT
.ART
css