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.4118
sin()
11111115.4108