domains / families / design / progressive-blur

progressive-blur

separate

Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.

When to use

• progressive blur
• gradient blur overlay
• stepped blur masks
• top blur
• bottom blur
• CSS backdrop-filter masks

When not to use

• blurring flat backgrounds
• non-CSS blur effects

Skill page

Source