Contrast

Demo Info

Demo Information

3basic

Learn how backdrop-filter contrast adjusts the contrast of the background behind an element.

Key Concepts

Contrast value range (0 to infinity)
Understanding contrast multipliers
Creating muted or vibrant overlays

Technical Details

backdrop-filter: contrast(1.5);
/* Values: 0-1 (reduced), 1 (normal), >1 (increased) */
/* Adjusts the contrast of the background behind the element */

← Back to Basic Examples

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

Contrast Backdrop Filter

Low Contrast (0.5)

Reduced contrast

Makes background less distinct

High Contrast (1.5)

Increased contrast

Makes background more vibrant

Very Low Contrast (0.3)

Minimal contrast

Background becomes very muted

Maximum Contrast (2.0)

Maximum contrast

Doubles the contrast