When I pair program with someone new, I usually refer them to the incredible website a single div. It reminds me that I have a long way to go in web development. It also reminds me that CSS isn’t the annoying, finicky styling language I once thought it was—it’s powerful.
I want to discuss a single component of that superpower today - gradients. Gradients in CSS can do some remarkably unexpected things along with all the typical use cases.
We’re just going to look at one example to show how CSS Gradients are a superpower.
This picture is a single HTML div and a whole ton of CSS. But when you actually inspect the div and the associated styles, you realize that there’s not much to it. In fact, the biggest part of this image, the stained glass inside the light purple border, is a single CSS background declaration.
Obviously, you want to see the background declaration to make the stained glass effect. So here ya go:
background: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0) 64.5%, black 64.7%, black 67%, rgba(0, 0, 0, 0) 67.2%) 50% 0 / 100% 35.5%, linear-gradient(black, black) 2.5% 100.2% / 1.7% 65.5%, linear-gradient(black, black) 97.6% 100.2% / 1.7% 65.5%, linear-gradient(black, black) 50% 98.2% / 94% 1.4%, linear-gradient(black, black) 0% 85% / 3% 1.4%, linear-gradient(45deg, #ffd700, #ffa500) 0 100.2% / 3% 15%, linear-gradient(black, black) 0% 70% / 3% 1.4%, linear-gradient(45deg, #ffd700, #ffa500) 0 82% / 3% 15%, linear-gradient(black, black) 0% 52% / 3% 1.4%, linear-gradient(45deg, #ffd700, #ffa500) 0 63% / 3% 18%, linear-gradient(black, black) 0% 35% / 3% 1.4%, linear-gradient(45deg, #ffa500, #ff7f50) 0 42% / 3% 16%, linear-gradient(black, black) 100% 85% / 3% 1.4%, linear-gradient(45deg, #ffd700, #ffa500) 100% 100.2% / 3% 15%, linear-gradient(black, black) 100% 70% / 3% 1.4%, linear-gradient(45deg, #ffd700, #ffa500) 100% 82% / 3% 15%, linear-gradient(black, black) 100% 52% / 3% 1.4%, linear-gradient(45deg, #ffd700, #ffa500) 100% 63% / 3% 18%, linear-gradient(black, black) 100% 35% / 3% 1.4%, linear-gradient(45deg, #ffa500, #ff7f50) 100% 42% / 3% 16%, linear-gradient(30deg, rgba(0, 0, 0, 0) 24%, black 24.2%, black 36%, rgba(0, 0, 0, 0) 36.2%) -.5% 11% / 10% 10%, linear-gradient(50deg, rgba(0, 0, 0, 0) 24%, black 24.2%, black 36%, rgba(0, 0, 0, 0) 36.2%) 21.5% -2.8% / 10% 10%, linear-gradient(black, black) 50% 0 / 1.8% 3%, linear-gradient(-50deg, rgba(0, 0, 0, 0) 24%, black 24.2%, black 36%, rgba(0, 0, 0, 0) 36.2%) 78.5% -2.8% / 10% 10%, linear-gradient(-30deg, rgba(0, 0, 0, 0) 24%, black 24.2%, black 36%, rgba(0, 0, 0, 0) 36.2%) 100.5% 11% / 10% 10%, radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0) 67%, #ff7f50 67.2%, #dc143c 85%) 50% 0 / 100% 35.5%, linear-gradient(black, black) 30% 100.2% / 1.8% 3%, linear-gradient(black, black) 70% 100.2% / 1.8% 3%, linear-gradient(to top, #ffd700, #ffa500) 0 100.2% / 100% 2.8%, linear-gradient(black, black) 50% 42% / 100% 1.2%, radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0) 24.5%, black 24.7%, black 27.3%, rgba(0, 0, 0, 0) 27.5%) 50% 10% / 100% 35.5%, radial-gradient(circle at 50% 100%, #ff6347 10%, #ff4500 24.7%, rgba(0, 0, 0, 0) 27%) 50% 10% / 100% 35.5%, linear-gradient(80deg, rgba(0, 0, 0, 0) 44%, black 44.2%, black 45.6%, rgba(0, 0, 0, 0) 45.8%) 50% 0 / 100% 42%, linear-gradient(black, black) 50% 15% / 15% 1.2%, linear-gradient(-80deg, rgba(0, 0, 0, 0) 44%, black 44.2%, black 45.6%, rgba(0, 0, 0, 0) 45.8%) 50% 0 / 100% 42%, linear-gradient(80deg, rgba(0, 0, 0, 0) 81%, #ffa500 81%) 0 0 / 49% 15%, linear-gradient(-80deg, rgba(0, 0, 0, 0) 78%, #ffa500 78%, #ff8c00 100%) 100% 0 / 51% 15%, linear-gradient(80deg, rgba(0, 0, 0, 0) 80%, #ff6347 80%) 0 0 / 51% 42%, linear-gradient(-80deg, rgba(0, 0, 0, 0) 80%, #ff6347 80%, #ff7f50 100%) 100% 0 / 51% 42%, linear-gradient(49deg, rgba(0, 0, 0, 0) 33%, black 33.2%, black 34.5%, rgba(0, 0, 0, 0) 34.7%) 50% 0 / 100% 42%, linear-gradient(black, black) 33% 22% / 18% 1.2%, linear-gradient(black, black) 67% 22% / 18% 1.2%, linear-gradient(-49deg, rgba(0, 0, 0, 0) 33%, black 33.2%, black 34.5%, rgba(0, 0, 0, 0) 34.7%) 50% 0 / 100% 42%, linear-gradient(49deg, rgba(0, 0, 0, 0) 35%, #ffd700 35.2%, #fffacd 100%) 0 0 / 50% 22%, linear-gradient(49deg, rgba(0, 0, 0, 0) 50%, #f0e68c 50.2%, #fffacd 100%) 0 0 / 50% 42%, linear-gradient(-49deg, rgba(0, 0, 0, 0) 35%, #f0e68c 35.2%, #ffd700 100%) 100% 0 / 50% 22%, linear-gradient(-49deg, rgba(0, 0, 0, 0) 50%, #ffd700 50.2%) 100% 0 / 50% 42%, linear-gradient(25deg, rgba(0, 0, 0, 0) 22%, black 22.2%, black 23.6%, rgba(0, 0, 0, 0) 23.8%) 50% 0 / 100% 42%, linear-gradient(black, black) 9.5% 27% / 26.5% 1.2%, linear-gradient(black, black) 90.5% 27% / 26.5% 1.2%, linear-gradient(-25deg, rgba(0, 0, 0, 0) 22%, black 22.2%, black 23.6%, rgba(0, 0, 0, 0) 23.8%) 50% 0 / 100% 42%, linear-gradient(25deg, rgba(0, 0, 0, 0) 6%, #ff6347 6.2%, #ff7f50 30%) 0 0 / 50% 27%, linear-gradient(-25deg, rgba(0, 0, 0, 0) 6%, #ff6347 6.2%, #ff7f50 30%) 100% 0 / 50% 27%, linear-gradient(25deg, rgba(0, 0, 0, 0) 30%, #ffa500 30.2%, #ff8c00 50%) 0 0 / 50% 42%, linear-gradient(-25deg, rgba(0, 0, 0, 0) 30%, #ffa500 30.2%, #ff8c00 50%) 100% 0 / 50% 42%, linear-gradient(black, black) 16% 34.5% / 1.7% 11%, linear-gradient(black, black) 84% 34.5% / 1.7% 11%, linear-gradient(60deg, #f0e68c, #fffacd 60%) 0 0 / 16% 42%, linear-gradient(60deg, #ffd700 30%, #f0e68c) 0 0 / 50% 42%, linear-gradient(60deg, #ffd700, #f0e68c 60%) 100% 0 / 16% 42%, linear-gradient(60deg, #f0e68c 30%, #fffacd) 100% 0 / 50% 42%, linear-gradient(-68deg, rgba(0, 0, 0, 0) 62%, black 62.2%, black 63.6%, rgba(0, 0, 0, 0) 63.8%) 50% 100% / 100% 58%, linear-gradient(black, black) 50% 55% / 17% 1.3%, linear-gradient(black, black) 50% 77% / 42% 1.3%, linear-gradient(68deg, rgba(0, 0, 0, 0) 62%, black 62.2%, black 63.6%, rgba(0, 0, 0, 0) 63.8%) 50% 100% / 100% 58%, linear-gradient(-68deg, #556b2f 10%, rgba(0, 0, 0, 0) 10%) 0 9% / 50% 50%, linear-gradient(68deg, #556b2f, #6b8e23 10%, rgba(0, 0, 0, 0) 10%) 100% 9% / 50% 50%, linear-gradient(-68deg, #2e8b57 15%, #228b22 26%, rgba(0, 0, 0, 0) 26%) 0 44% / 51% 58%, linear-gradient(68deg, #2e8b57 15%, #3cb371 26%, rgba(0, 0, 0, 0) 26%) 100% 44% / 51% 58%, linear-gradient(-68deg, #3cb371 15%, #228b22 40%, rgba(0, 0, 0, 0) 40%) 0 100% / 51% 58%, linear-gradient(68deg, #3cb371 20%, #20b2aa 40%, rgba(0, 0, 0, 0) 40%) 100% 100% / 50% 58%, linear-gradient(-47deg, rgba(0, 0, 0, 0) 72%, black 72.2%, black 73.6%, rgba(0, 0, 0, 0) 73.8%) 50% 100% / 100% 58%, linear-gradient(black, black) 21.5% 65% / 20% 1.3%, linear-gradient(black, black) 79% 65% / 20% 1.3%, linear-gradient(47deg, rgba(0, 0, 0, 0) 72%, black 72.2%, black 73.6%, rgba(0, 0, 0, 0) 73.8%) 50% 100% / 100% 58%, linear-gradient(-47deg, #008b8b, #5f9ea0 26%, rgba(0, 0, 0, 0) 26%) 0 17% / 50% 58%, linear-gradient(47deg, #5f9ea0, #008b8b 26%, rgba(0, 0, 0, 0) 26%) 100% 17% / 50% 58%, linear-gradient(-47deg, #20b2aa, #2e8b57 62%, rgba(0, 0, 0, 0) 62%) 0 100% / 50% 58%, linear-gradient(47deg, #48d1cc, #3cb371 62%, rgba(0, 0, 0, 0) 62%) 100% 100% / 50% 58%, linear-gradient(-20deg, rgba(0, 0, 0, 0) 84%, black 84.2%, black 85.6%, rgba(0, 0, 0, 0) 85.8%) 50% 100% / 100% 58%, linear-gradient(black, black) 22% 50% / 20% 1.3%, linear-gradient(black, black) 78% 50% / 20% 1.3%, linear-gradient(20deg, rgba(0, 0, 0, 0) 84%, black 84.2%, black 85.6%, rgba(0, 0, 0, 0) 85.8%) 50% 100% / 100% 58%, linear-gradient(-20deg, #6b8e23 13%, rgba(0, 0, 0, 0) 13%) 0 10% / 50% 44%, linear-gradient(20deg, #556b2f 13%, rgba(0, 0, 0, 0) 13%) 100% 10% / 50% 44%, linear-gradient(-20deg, #20b2aa 50%, #3cb371 82%, rgba(0, 0, 0, 0) 82%) 0 100% / 50% 58%, linear-gradient(20deg, #3cb371 50%, #20b2aa 82%, rgba(0, 0, 0, 0) 82%) 100% 100% / 50% 58%, linear-gradient(45deg, #9acd32, #556b2f 80%) 0 40% / 50% 25%, linear-gradient(45deg, #9acd32, #556b2f 80%) 100% 40% / 50% 25%;Sheesh! Don’t worry; I didn’t read through it all, either. But I did pull it into my editor and format this insanity to make it a bit easier to comprehend:
background: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0) 64.5%, black 64.7%, black 67%, rgba(0, 0, 0, 0) 67.2%) 50% 0 / 100% 35.5%,
linear-gradient(black, black) 2.5% 100.2% / 1.7% 65.5%,
linear-gradient(black, black) 97.6% 100.2% / 1.7% 65.5%,
linear-gradient(black, black) 50% 98.2% / 94% 1.4%,
linear-gradient(black, black) 0% 85% / 3% 1.4%,
linear-gradient(45deg, #ffd700, #ffa500) 0 100.2% / 3% 15%,
linear-gradient(black, black) 0% 70% / 3% 1.4%,
linear-gradient(45deg, #ffd700, #ffa500) 0 82% / 3% 15%,
linear-gradient(black, black) 0% 52% / 3% 1.4%,
linear-gradient(45deg, #ffd700, #ffa500) 0 63% / 3% 18%,
linear-gradient(black, black) 0% 35% / 3% 1.4%,
linear-gradient(45deg, #ffa500, #ff7f50) 0 42% / 3% 16%,
linear-gradient(black, black) 100% 85% / 3% 1.4%,
linear-gradient(45deg, #ffd700, #ffa500) 100% 100.2% / 3% 15%,
linear-gradient(black, black) 100% 70% / 3% 1.4%,
linear-gradient(45deg, #ffd700, #ffa500) 100% 82% / 3% 15%,
linear-gradient(black, black) 100% 52% / 3% 1.4%,
linear-gradient(45deg, #ffd700, #ffa500) 100% 63% / 3% 18%,
linear-gradient(black, black) 100% 35% / 3% 1.4%,
linear-gradient(45deg, #ffa500, #ff7f50) 100% 42% / 3% 16%,
linear-gradient(30deg, rgba(0, 0, 0, 0)
24%, black 24.2%, black 36%,
rgba(0, 0, 0, 0) 36.2%) -.5% 11% / 10% 10%,
linear-gradient(50deg, rgba(0, 0, 0, 0)
24%, black 24.2%, black 36%,
rgba(0, 0, 0, 0) 36.2%) 21.5% -2.8% / 10% 10%,
linear-gradient(black, black) 50% 0 / 1.8% 3%,
linear-gradient(-50deg, rgba(0, 0, 0, 0) 24%,
black 24.2%, black 36%,
rgba(0, 0, 0, 0) 36.2%) 78.5% -2.8% / 10% 10%,
linear-gradient(-30deg, rgba(0, 0, 0, 0)
24%, black 24.2%, black 36%,
rgba(0, 0, 0, 0) 36.2%) 100.5% 11% / 10% 10%,
radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0)
67%, #ff7f50 67.2%, #dc143c 85%) 50% 0 / 100% 35.5%,
linear-gradient(black, black) 30% 100.2% / 1.8% 3%,
linear-gradient(black, black) 70% 100.2% / 1.8% 3%,
linear-gradient(to top, #ffd700, #ffa500) 0 100.2% / 100% 2.8%,
linear-gradient(black, black) 50% 42% / 100% 1.2%,
radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0)
24.5%, black 24.7%, black 27.3%,
rgba(0, 0, 0, 0) 27.5%) 50% 10% / 100% 35.5%,
radial-gradient(circle at 50% 100%, #ff6347 10%, #ff4500
24.7%, rgba(0, 0, 0, 0) 27%) 50% 10% / 100% 35.5%,
linear-gradient(80deg, rgba(0, 0, 0, 0) 44%, black 44.2%, black 45.6%,
rgba(0, 0, 0, 0) 45.8%) 50% 0 / 100% 42%,
linear-gradient(black, black) 50% 15% / 15% 1.2%,
linear-gradient(-80deg, rgba(0, 0, 0, 0) 44%, black 44.2%, black 45.6%,
rgba(0, 0, 0, 0) 45.8%) 50% 0 / 100% 42%,
linear-gradient(80deg, rgba(0, 0, 0, 0) 81%, #ffa500 81%) 0 0 / 49% 15%,
linear-gradient(-80deg, rgba(0, 0, 0, 0) 78%, #ffa500 78%, #ff8c00 100%) 100% 0 / 51% 15%,
linear-gradient(80deg, rgba(0, 0, 0, 0) 80%, #ff6347 80%) 0 0 / 51% 42%,
linear-gradient(-80deg, rgba(0, 0, 0, 0) 80%, #ff6347 80%, #ff7f50 100%) 100% 0 / 51% 42%,
linear-gradient(49deg, rgba(0, 0, 0, 0) 33%, black 33.2%, black 34.5%,
rgba(0, 0, 0, 0) 34.7%) 50% 0 / 100% 42%,
linear-gradient(black, black) 33% 22% / 18% 1.2%,
linear-gradient(black, black) 67% 22% / 18% 1.2%,
linear-gradient(-49deg, rgba(0, 0, 0, 0) 33%, black 33.2%, black 34.5%,
rgba(0, 0, 0, 0) 34.7%) 50% 0 / 100% 42%,
linear-gradient(49deg, rgba(0, 0, 0, 0) 35%, #ffd700 35.2%, #fffacd 100%) 0 0 / 50% 22%,
linear-gradient(49deg, rgba(0, 0, 0, 0) 50%, #f0e68c 50.2%, #fffacd 100%) 0 0 / 50% 42%,
linear-gradient(-49deg, rgba(0, 0, 0, 0) 35%, #f0e68c 35.2%, #ffd700 100%) 100% 0 / 50% 22%,
linear-gradient(-49deg, rgba(0, 0, 0, 0) 50%, #ffd700 50.2%) 100% 0 / 50% 42%,
linear-gradient(25deg, rgba(0, 0, 0, 0) 22%, black 22.2%, black 23.6%,
rgba(0, 0, 0, 0) 23.8%) 50% 0 / 100% 42%,
linear-gradient(black, black) 9.5% 27% / 26.5% 1.2%,
linear-gradient(black, black) 90.5% 27% / 26.5% 1.2%,
linear-gradient(-25deg, rgba(0, 0, 0, 0) 22%, black 22.2%, black 23.6%,
rgba(0, 0, 0, 0) 23.8%) 50% 0 / 100% 42%,
linear-gradient(25deg, rgba(0, 0, 0, 0) 6%, #ff6347 6.2%, #ff7f50 30%) 0 0 / 50% 27%,
linear-gradient(-25deg, rgba(0, 0, 0, 0) 6%, #ff6347 6.2%, #ff7f50 30%) 100% 0 / 50% 27%,
linear-gradient(25deg, rgba(0, 0, 0, 0) 30%, #ffa500 30.2%, #ff8c00 50%) 0 0 / 50% 42%,
linear-gradient(-25deg, rgba(0, 0, 0, 0) 30%, #ffa500 30.2%, #ff8c00 50%) 100% 0 / 50% 42%,
linear-gradient(black, black) 16% 34.5% / 1.7% 11%,
linear-gradient(black, black) 84% 34.5% / 1.7% 11%,
linear-gradient(60deg, #f0e68c, #fffacd 60%) 0 0 / 16% 42%,
linear-gradient(60deg, #ffd700 30%, #f0e68c) 0 0 / 50% 42%,
linear-gradient(60deg, #ffd700, #f0e68c 60%) 100% 0 / 16% 42%,
linear-gradient(60deg, #f0e68c 30%, #fffacd) 100% 0 / 50% 42%,
linear-gradient(-68deg, rgba(0, 0, 0, 0) 62%, black 62.2%, black 63.6%,
rgba(0, 0, 0, 0) 63.8%) 50% 100% / 100% 58%,
linear-gradient(black, black) 50% 55% / 17% 1.3%,
linear-gradient(black, black) 50% 77% / 42% 1.3%,
linear-gradient(68deg, rgba(0, 0, 0, 0) 62%, black 62.2%, black 63.6%,
rgba(0, 0, 0, 0) 63.8%) 50% 100% / 100% 58%,
linear-gradient(-68deg, #556b2f 10%, rgba(0, 0, 0, 0) 10%) 0 9% / 50% 50%,
linear-gradient(68deg, #556b2f, #6b8e23 10%,
rgba(0, 0, 0, 0) 10%) 100% 9% / 50% 50%,
linear-gradient(-68deg, #2e8b57 15%, #228b22 26%,
rgba(0, 0, 0, 0) 26%) 0 44% / 51% 58%,
linear-gradient(68deg, #2e8b57 15%, #3cb371 26%,
rgba(0, 0, 0, 0) 26%) 100% 44% / 51% 58%,
linear-gradient(-68deg, #3cb371 15%, #228b22 40%,
rgba(0, 0, 0, 0) 40%) 0 100% / 51% 58%,
linear-gradient(68deg, #3cb371 20%, #20b2aa 40%,
rgba(0, 0, 0, 0) 40%) 100% 100% / 50% 58%,
linear-gradient(-47deg, rgba(0, 0, 0, 0) 72%, black 72.2%, black 73.6%,
rgba(0, 0, 0, 0) 73.8%) 50% 100% / 100% 58%,
linear-gradient(black, black) 21.5% 65% / 20% 1.3%,
linear-gradient(black, black) 79% 65% / 20% 1.3%,
linear-gradient(47deg, rgba(0, 0, 0, 0) 72%, black 72.2%, black 73.6%,
rgba(0, 0, 0, 0) 73.8%) 50% 100% / 100% 58%,
linear-gradient(-47deg, #008b8b, #5f9ea0 26%,
rgba(0, 0, 0, 0) 26%) 0 17% / 50% 58%,
linear-gradient(47deg, #5f9ea0, #008b8b 26%,
rgba(0, 0, 0, 0) 26%) 100% 17% / 50% 58%,
linear-gradient(-47deg, #20b2aa, #2e8b57 62%,
rgba(0, 0, 0, 0) 62%) 0 100% / 50% 58%,
linear-gradient(47deg, #48d1cc, #3cb371 62%,
rgba(0, 0, 0, 0) 62%) 100% 100% / 50% 58%,
linear-gradient(-20deg, rgba(0, 0, 0, 0) 84%, black 84.2%, black 85.6%,
rgba(0, 0, 0, 0) 85.8%) 50% 100% / 100% 58%,
linear-gradient(black, black) 22% 50% / 20% 1.3%,
linear-gradient(black, black) 78% 50% / 20% 1.3%,
linear-gradient(20deg, rgba(0, 0, 0, 0) 84%, black 84.2%, black 85.6%,
rgba(0, 0, 0, 0) 85.8%) 50% 100% / 100% 58%,
linear-gradient(-20deg, #6b8e23 13%, rgba(0, 0, 0, 0) 13%) 0 10% / 50% 44%,
linear-gradient(20deg, #556b2f 13%, rgba(0, 0, 0, 0) 13%) 100% 10% / 50% 44%,
linear-gradient(-20deg, #20b2aa 50%, #3cb371 82%, rgba(0, 0, 0, 0) 82%) 0 100% / 50% 58%,
linear-gradient(20deg, #3cb371 50%, #20b2aa 82%, rgba(0, 0, 0, 0) 82%) 100% 100% / 50% 58%,
linear-gradient(45deg, #9acd32, #556b2f 80%) 0 40% / 50% 25%,
linear-gradient(45deg, #9acd32, #556b2f 80%) 100% 40% / 50% 25%;
background-repeat: no-repeat;The formatting here doesn’t show well in Substack, unfortunately, but try copying it into your own editor (if you’re crazy enough, that is) and having a go at understanding what’s going on.
The picture takes advantage of one big feature of CSS backgrounds - stacking. You can stack as many backgrounds as you’d like in a single div. The very first gradient is a radial gradient, which takes the shape of a half-circle and is near the top of the div, all black. This is the top arch of the stained glass window.
The gradients you see declared after this arch are the different sections of the window. Some of them represent black lines, and some of them represent the colors that fill in the gaps. Each gradient acts as its own background stacked on top of the previous gradients. But since every gradient is in a different spot, they all show up to fill their role in the whole picture.
Many of the gradients take the following form:
linear-gradient(black, black) 2.5% 100% / 1.7% 65.5%,At first, this syntax confused me, but I believe I can parse it now. This is a full background declaration, and it represents a background of a linear gradient from black to black (which means the whole thing is black). The 2.5% 100.2% is the position of the gradient. And the 1.7% and 65.5% is the size of the gradient. The whole line is a terse shorthand for the following rule:
.myDiv {
background: linear-gradient(black,black);
background-position: 2.5% 100%;
background-size: 1.7% 65.5%
}The background-position means to position the gradient 2.5% from the left side of the div and 100% down from the top of the div.
For the background size, the first sets the width, and the second sets the height. So, this gradient is 1.7% of the width of the div and 65.5% of the height.
This particular declaration we’re analyzing is the black vertical bar on the left of the stained glass window.
When I realized how this amazing effect was created, I was a bit disappointed. The magic had disappeared, but it was replaced with something else—respect for how much time went into creating this effect. Each of these gradients for each black bar and each colored section was carefully placed. And I would imagine they were placed by hand. How many hours did this take?
It’s fair to say that CSS gradients can do just about anything if you have the patience, knowledge, and time.