28 / Image

Progressive Blur

The picture softens towards the bottom, so the caption sits on something readable without a black bar laid across it.

also called gradient blur · layered blur · tapered blur

Stacked layers, each blurring more than the last, each masked to a different band. Far more elegant than a scrim because the image stays legible while the text still reads.

How it is built

backdrop-filter: blur(Npx); mask-image: linear-gradient(to top, #000, transparent);