Simple Blur

Demo Info

Demo Information

1basic

Learn the basics of backdrop-filter blur, which creates a frosted glass effect by blurring the background behind an element.

Key Concepts

Basic backdrop-filter blur syntax
Understanding blur radius values
Using backdrop-filter with semi-transparent backgrounds

Technical Details

backdrop-filter: blur(10px);
/* Applies a blur effect to the background behind the element */
/* Works with semi-transparent backgrounds for glass effect */

← Back to Basic Examples

Found a bug or want to contribute? Check out the GitHub repo

Simple Blur Backdrop Filter

Light Blur (5px)

Content behind blur

Backdrop blur creates a frosted glass effect

Medium Blur (10px)

More blur applied

Increased blur radius for stronger effect

Strong Blur (20px)

Heavy blur effect

Strong blur for maximum glass effect

Very Strong Blur (40px)

Maximum blur

Extreme blur for dramatic effect