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="M52.254586 1 C81.793558 1.020146 142.889626 28.455454 160.390318 36.391247 C177.891011 44.327042 198.483412 67.997702 199 94.116517 C198.483412 122.783977 173.855535 145.699177 158.408936 150.795308 C142.962336 155.89144 70.349535 196.598719 45.147508 198.797051 C19.94548 200.995382 9.055453 185.067474 7.196772 163.985296 C2.162193 123.332676 61.231008 98.200484 61.231008 98.200484 C61.231008 98.200484 0.716939 86.700691 1.000997 53.930474 C0.929031 9.366904 30.28253 5.667731 52.254586 1 Z"/>
</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(236.44580360367553px, 468.9847126801645px) scale(calc(max(0, 85.949435239187) / max(0.000001, 800)), calc(max(0, 71.66579730042926) / max(0.000001, 740))); 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="layer-02-blue-neck ga-shared"></div>
<div class="copper-tipped-lock-copy-copy ga-shared"></div>
<div class="copper-tipped-lock-copy-copy-copy ga-shared"></div>
<div class="layer-05-linen-lapel ga-shared"></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(212.21113262338122px, 304.26944444444445px) scale(calc(max(0, 230.29660037851133) / max(0.000001, 800)), calc(max(0, 260.79861111111114) / max(0.000001, 740))); 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(41 97 227 / 1)" stroke="rgb(255 255 255 / 0)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M187.415754 199 L66.994958 195.624551 C66.994958 195.624551 53.300661 185.202237 53.257239 185.202237 C53.213816 185.202237 55.219382 121.264013 55.219382 121.264013 C55.219382 121.264013 9.180926 122.262149 9.222991 122.262149 C9.265056 122.262149 3.75857 122.972707 1.088101 115.818 C-1.582368 108.663294 57.343002 53.320064 57.385068 53.320064 C57.427133 53.320064 44.880812 39.325789 44.880812 39.325789 C44.880812 39.325789 41.518301 35.298496 41.168209 30.77513 C40.818117 26.251764 60.72044 1 60.72044 1 L199 2.815338 Z"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="layer-09-quiet-closed-eye ga-shared"></div>
<div class="copper-tipped-lock-7 ga-shared"></div>
<div class="copper-tipped-lock-6 ga-shared"></div>
<div class="copper-tipped-lock-5 ga-shared"></div>
<div class="copper-tipped-lock-4 ga-shared"></div>
<div class="copper-tipped-lock-3 ga-shared"></div>
<div class="copper-tipped-lock-2 ga-shared"></div>
<div class="copper-tipped-lock ga-shared"></div>
<div class="layer-16-ochre-ember 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(236.44580360367553px, 468.9847126801645px) scale(calc(max(0, 85.949435239187) / max(0.000001, 800)), calc(max(0, 71.66579730042926) / max(0.000001, 740))); 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="layer-18-lower-lip ga-shared"></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(41px, -61px) scale(calc(max(0, 200) / max(0.000001, 800)), calc(max(0, 573) / max(0.000001, 740))); 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(255 255 255 / 1)" stroke="rgb(255 255 255 / 0)" stroke-width="2" stroke-linejoin="round" transform="rotate(0 100 100)">
<path d="M80.872275 190.542014 C66.100214 178.21595 48.473197 160.729415 73.022259 149.73513 C97.57132 138.740845 145.683751 116.700792 140.142563 102.418383 C134.601375 88.135974 97.189475 72.691137 105.607819 61.740206 C114.026162 50.789275 198.862284 6.828394 198.999925 6.828394 C199.137567 6.828394 8.823511 1 8.823511 1 C8.823511 1 -1.77934 36.328031 1.701663 55.905039 C5.182666 75.482046 66.397697 92.647492 54.427311 109.68694 C42.456924 126.726388 11.554144 127.792624 10.106686 147.533563 C8.659229 167.274503 40.148095 190.505434 50.546703 194.905857 C60.945311 199.306281 95.644337 202.868077 80.872275 190.542014 Z"/>
</g>
</svg>
</g>
</svg>
</div>
<div class="gradient-layer ga-shared"></div>
<div class="layer-00-fine-printed-grain-turbulence ga-svg">
<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="noise">
<pattern id="ga-svg-0" width="200" height="200" patternUnits="userSpaceOnUse" overflow="hidden">
<svg width="200" height="200" viewBox="0 0 200 200" overflow="hidden">
<filter id="ga-svg-0-content" x="0" y="0" width="100%" height="100%">
<feTurbulence type="turbulence" baseFrequency="0.78" numOctaves="1" seed="24" stitchTiles="stitch"/>
</filter>
<rect width="100%" height="100%" filter="url(#ga-svg-0-content)"/>
</svg>
</pattern>
<rect style="x: calc(-200px * 0 / max(0.000001, 200)); width: calc(200px * 800 / max(0.000001, 200)); y: calc(-200px * 0 / max(0.000001, 200)); height: calc(200px * 740 / max(0.000001, 200));" fill="url(#ga-svg-0)"/>
</svg>
</div>
</div>#root {
width: 800px;
height: 740px;
--ga-clone-0: linear-gradient(-90deg, rgb(3 11 20) 47.89%, rgb(20 34 54) 69.01%, rgb(76 74 73) 83.1%, rgb(189 133 104) 97.18%, rgb(189 133 104) 99%, transparent 100%);
--ga-clone-1: radial-gradient(ellipse at 56% 41%, rgb(8 18 16) 1.14%, rgb(20 34 54) 45.74%, transparent 69.89%);
--ga-clone-2: radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104) 96.31%, transparent 100%);
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 .ga-svg {
position: absolute;
pointer-events: none;
}
#root .layer-02-blue-neck {
background: linear-gradient(116deg, rgb(7 29 62) 0%, rgb(41 97 227) 54%, rgb(19 45 117) 100%) 393px 499px / 153px 126px no-repeat, linear-gradient(rgb(255 110 96), rgb(255 110 96)) 0 0 / 800px 740px no-repeat;
}
#root .copper-tipped-lock-copy-copy {
transform: translate(-178.26165247465477px, -42.138568699711755px) rotate(13deg) scale(0.782608695652174, 1);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20) 47.89%, rgb(20 34 54) 69.01%, rgb(76 74 73) 83.1%, rgb(189 133 104) 97.18%, rgb(189 133 104) 99%, transparent 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16) 1.14%, rgb(20 34 54) 45.74%, transparent 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104) 96.31%, transparent 100%) 434px 529px / 69px 44px no-repeat;
}
#root .copper-tipped-lock-copy-copy-copy {
transform: translate(-160.6490431833214px, 37.01098934883623px) rotate(7deg) scale(0.8115942028985508, 1);
transform-origin: 50% 50%;
background: linear-gradient(-90deg, rgb(3 11 20) 47.89%, rgb(20 34 54) 69.01%, rgb(76 74 73) 83.1%, rgb(189 133 104) 97.18%, rgb(189 133 104) 99%, transparent 100%) 434px 286px / 69px 247px no-repeat, radial-gradient(ellipse at 56% 41%, rgb(8 18 16) 1.14%, rgb(20 34 54) 45.74%, transparent 69.89%) 435px 501px / 68px 68px no-repeat, radial-gradient(ellipse 50% 87% at 50% 13%, rgb(189 132 104) 96.31%, transparent 100%) 434px 529px / 69px 44px no-repeat;
}
#root .layer-05-linen-lapel {
background: conic-gradient(at 100% -110%, transparent 0%, transparent 53.33%, rgb(255 247 209) 53.33%, rgb(255 237 182) 58.61%, rgb(201 160 120) 62.78%, transparent 62.78%, transparent 100%) 354px 636px / 214px 104px no-repeat, conic-gradient(at 50% -190%, transparent 0%, transparent 42.22%, rgb(217 149 121) 42.22%, rgb(245 204 146) 46.67%, rgb(255 240 187) 52.22%, rgb(255 249 220) 57.78%, transparent 57.78%, transparent 100%) 310px 604px / 376px 136px no-repeat, radial-gradient(ellipse 50% 50%, rgb(4 12 23) 0%, rgb(10 23 41) 54.93%, rgb(38 51 68) 81.69%, rgb(167 132 109) 97.18%, rgb(167 132 109) 99%, transparent 100%) 544px 510px / 60px 88px no-repeat, radial-gradient(ellipse 50% 50%, rgb(4 12 23) 0%, rgb(10 23 41) 54.93%, rgb(38 51 68) 81.69%, rgb(167 132 109) 97.18%, rgb(167 132 109) 99%, transparent 100%) 301px 524px / 54px 82px no-repeat, radial-gradient(ellipse 50% 50%, rgb(4 12 23) 0%, rgb(10 23 41) 54.93%, rgb(38 51 68) 81.69%, rgb(167 132 109) 97.18%, rgb(167 132 109) 99%, transparent 100%) 343px 519px / 54px 82px no-repeat;
}
#root .layer-09-quiet-closed-eye {
background: radial-gradient(ellipse 50% 50% at 20% 0, rgb(10 35 74) 53.69%, transparent 100%) 274px 462px / 41px 24px no-repeat;
}
#root .copper-tipped-lock-7,
#root .copper-tipped-lock-6,
#root .copper-tipped-lock-5,
#root .copper-tipped-lock-4,
#root .copper-tipped-lock-3,
#root .copper-tipped-lock-2,
#root .copper-tipped-lock {
background: var(--ga-clone-0) 434px 286px / 69px 247px no-repeat, var(--ga-clone-1) 435px 501px / 68px 68px no-repeat, var(--ga-clone-2) 434px 529px / 69px 44px no-repeat;
}
#root .copper-tipped-lock-7 {
transform: translate(170.421836390198px, -90.32045797755237px) rotate(317deg);
transform-origin: 50% 50%;
}
#root .copper-tipped-lock-6 {
transform: translate(160.11951006857282px, -54.94902502528697px) rotate(329deg);
transform-origin: 50% 50%;
}
#root .copper-tipped-lock-5 {
transform: translate(145.6230913204315px, -8.416915161185841px) rotate(339deg);
transform-origin: 50% 50%;
}
#root .copper-tipped-lock-4 {
transform: translate(100.76730636218667px, 10.017044039377879px) rotate(347deg);
transform-origin: 50% 50%;
}
#root .copper-tipped-lock-3 {
transform: translate(46.021426143432166px, 8.51734717317862px) rotate(352deg);
transform-origin: 50% 50%;
}
#root .copper-tipped-lock {
transform: translate(-40.41697484232009px, -13.54936765835032px) rotate(8deg);
transform-origin: 50% 50%;
}
#root .layer-16-ochre-ember {
background: radial-gradient(ellipse 50% 50%, rgb(132 83 52) 0%, rgb(188 113 51) 45.07%, rgb(221 155 36) 76.06%, rgb(233 173 50) 97.18%, rgb(233 173 50) 99%, transparent 100%) 91px 473px / 40px 64px no-repeat, conic-gradient(at 100% 50%, transparent 0%, transparent 71.67%, rgb(255 248 219) 71.67%, rgb(255 244 207) 75%, rgb(239 211 149) 78.33%, transparent 78.33%, transparent 100%) 105px 472px / 163px 65px no-repeat, radial-gradient(ellipse 50% 73% at 50% 27%, rgb(236 255 208 / 0.56) 0%, rgb(214 255 180 / 0.24) 39.44%, transparent 97.18%, transparent 99%, transparent 100%) 289px 103px / 251px 118px no-repeat, conic-gradient(at 50% -500%, transparent 0%, transparent 45.94%, rgb(6 62 51) 45.94%, rgb(38 116 71) 48.33%, rgb(127 214 124) 50.56%, rgb(189 248 166) 52.78%, rgb(246 255 214) 54.06%, transparent 54.06%, transparent 100%) 272px 93px / 404px 138px no-repeat, conic-gradient(at 0 0, transparent 0%, transparent 13.06%, rgb(6 57 45) 13.06%, rgb(12 82 56) 17.22%, rgb(39 113 74) 21.67%, transparent 21.67%, transparent 100%) 599px 229px / 153px 72px no-repeat, conic-gradient(at 50% -200%, transparent 0%, transparent 37.78%, rgb(7 61 50) 37.78%, rgb(20 93 64) 43.89%, rgb(56 139 80) 50.28%, rgb(168 239 153) 57.78%, rgb(234 255 200) 62.22%, transparent 62.22%, transparent 100%) 185px 210px / 581px 100px no-repeat;
}
#root .layer-18-lower-lip {
mask-image: url("#ga-mask-2");
mask-mode: alpha;
background: radial-gradient(ellipse 50% 50%, rgb(8 81 120) 0%, rgb(7 61 92) 47.89%, rgb(6 36 59) 83.1%, rgb(3 23 37) 97.18%, rgb(3 23 37) 99%, transparent 100%) 226px 460px / 104px 96px no-repeat;
}
#root .gradient-layer {
background: linear-gradient(0deg, transparent 0%, rgb(247 109 96 / 0.074074) 4.49%, rgb(247 109 96 / 0.259259) 16.59%, rgb(247 109 96 / 0.5) 34.25%, rgb(247 109 96 / 0.740741) 55.41%, rgb(247 109 96 / 0.925926) 78.01%, rgb(247 109 96) 100%) 0 0 / 210px 273px no-repeat;
}
#root .layer-00-fine-printed-grain-turbulence {
left: 0;
width: max(0px, 200px);
top: 0;
height: max(0px, 200px);
} Comments (0)
Fuzzies
Yoav Kadosh
Hank Washington's "Fuzzies" design on Behance (https://www.behance.net/gallery/84818869/Fuzzies-vol-1) , Rebuilt as individually editable CSS-gradient layers.
Colors
Views
141
Code size
14.69 KB
Layers
59
<iframe
src="https://gra.dient.art/embed/tig1e9640j"
title="Fuzzies | GradientArt"
width="800"
height="740"
style="border: 0; max-width: 100%; aspect-ratio: 800 / 740; height: auto;"
loading="lazy"
></iframe>Layers (59)
00 / Fine printed grain - turbulence
noise
Gradient layer
linear
Shape layer
shape
18 / Lower lip
radial
Clipped to base layer
Shape layer
shape
16 / Ochre ember
radial
15 / Ivory rolling paper
conic
14 / Sunlight on the crown
radial
13 / Green bucket-hat crown
conic
12 / Folded brim shadow
conic
11 / Wide green hat brim
conic
Copper-tipped lock
Folder
10.2 / Copper-tipped lock (copy) (copy)
linear
10.2 / Copper-tipped lock (copy) (copy)
radial
10.2 / Copper-tipped lock (copy)
radial
Copper-tipped lock
Folder
10.2 / Copper-tipped lock (copy) (copy)
linear
10.2 / Copper-tipped lock (copy) (copy)
radial
10.2 / Copper-tipped lock (copy)
radial
Copper-tipped lock
Folder
10.2 / Copper-tipped lock (copy) (copy)
linear
10.2 / Copper-tipped lock (copy) (copy)
radial
10.2 / Copper-tipped lock (copy)
radial
Copper-tipped lock
Folder
10.2 / Copper-tipped lock (copy) (copy)
linear
10.2 / Copper-tipped lock (copy) (copy)
radial
10.2 / Copper-tipped lock (copy)
radial
Copper-tipped lock
Folder
10.2 / Copper-tipped lock (copy) (copy)
linear
10.2 / Copper-tipped lock (copy) (copy)
radial
10.2 / Copper-tipped lock (copy)
radial
Copper-tipped lock
Folder
10.2 / Copper-tipped lock (copy) (copy)
linear
10.2 / Copper-tipped lock (copy) (copy)
radial
10.2 / Copper-tipped lock (copy)
radial
Copper-tipped lock
Folder
10.2 / Copper-tipped lock (copy) (copy)
linear
10.2 / Copper-tipped lock (copy) (copy)
radial
10.2 / Copper-tipped lock (copy)
radial
09 / Quiet closed eye
radial
08 / Cut of the chin
conic
07 / Angular nose and brow
conic
06 / Cobalt face
linear
Shape layer
shape
05 / Linen lapel
conic
04 / Cream linen shoulder
conic
03.4 / Back lock
radial
03.3 / Back lock
radial
03.3 / Back lock (copy)
radial
Copper-tipped lock (copy) (copy) (copy)
Folder
10.2 / Copper-tipped lock (copy) (copy)
linear
10.2 / Copper-tipped lock (copy) (copy)
radial
10.2 / Copper-tipped lock (copy)
radial
Copper-tipped lock (copy) (copy)
Folder
10.2 / Copper-tipped lock (copy) (copy)
linear
10.2 / Copper-tipped lock (copy) (copy)
radial
10.2 / Copper-tipped lock (copy)
radial
02 / Blue neck
linear
01 / Coral paper
solid
GRADIENT
.ART
css