Ana Tudor 🐯Nov 25, 2022

How would you pure CSS background like the ones below? Vibrant at the top, desaturated at the bottom?

Constraints:
⚠️ 1 element per background, no pseudos
❌ no JS
⚠️ no SVG, no images save for at most 2 CSS gradients

Note they're not as dark/ light everywhere at the bottom (where fully desaturated). 😼

Hex for the first two:
🎨 54478c,2c699a,048ba8,0db39e,16db93,83e377,b9e769,efea5a,f1c453,f29e4c
🎨 001219,005f73,0a9396,94d2bd,e9d8a6,ee9b00,ca6702,bb3e03,ae2012,9b2226

#css #cssChallenge2022

Show threadCSS by T. Afif Nov 25, 2022

@anatudor

With some trial and error
```
background: linear-gradient(#0000,#fff), linear-gradient(90deg,#54478c,#2c699a,#048ba8,#0db39e,#16db93,#83e377,#b9e769,#efea5a,#f1c453,#f29e4c);
background-blend-mode: saturation;
```

probably not the same output but it looks close to me.

Show threadAna Tudor 🐯Nov 25, 2022

@css Yup!

The trick is to blend the vibrant gradient going along the horizontal axis with one going from transparent at the top to any pure grey (of saturation 0%, on the mid axis of the HSL bicone) at the bottom, then blend such that the resulting layer uses the saturation of the transparent to grey layer.

The cool thing here is that this transparent to grey layer doesn't necessarily have to be a linear top to bottom one and it can be animated for a reveal effect like https://codepen.io/thebabydino/pen/KKgEqGZ

Show threadAmelia Bellamy-RoydsNov 25, 2022
@anatudor @css
Ah, I'd instantly thought "background-blend-mode!" to modify saturation, but I was imagining something like bright red to black. I didn't think about how transparent would be even better, to not muck with the original colours at all on the top edge.
Show threadAna Tudor 🐯

@AmeliaBR @css In this exact particular case with the top to pure grey at the bottom gradient on top blend,ed with the bottom one using saturation, red works just as well. But in general... it's complicated.

This comparison with the HSL component combination approximation illustrates it https://codepen.io/thebabydino/full/RwoOMOZ

The blending result (blend mode can be changed by clicking value) also depends on components not highlighted in purple.

Nov 25, 2022 at 8:24pmWeb