progressive-blur.css
1.blur {
2 --layers: 5;
3}
4
5/* Each layer has an index and can access the layer count */
6[data-use="sin"] .blur .layer {
7 --blur: calc(sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30);
8 --stop: calc(sin(((var(--i)) / var(--layers)) * 90deg) * 15);
9}
10
11[data-use="pow"] .blur .layer {
12 --blur: calc(pow(2, var(--layers) - var(--i)) * 2);
13 --stop: calc(pow(2, var(--i)) * 0.75);
14}
15
16.blur .layer {
17 backdrop-filter: blur(calc(var(--blur) * 1px));
18 mask: radial-gradient(
19 150% 130% at 45% 90%,
20 #000 15%,
21 #0000 calc((15 + var(--stop)) * 1%)
22 );
23}
pow()
12012015.4118sin()
11111115.4108