Brightness

Demo Info

Demo Information

2basic

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

Key Concepts

Brightness value range (0 to infinity)
Understanding brightness multipliers
Creating darker or brighter overlays

Technical Details

backdrop-filter: brightness(1.5);
/* Values: 0-1 (darker), 1 (normal), >1 (brighter) */
/* Adjusts the brightness of the background behind the element */

← Back to Basic Examples

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

Brightness Backdrop Filter

Darker (0.5)

Darker background

Reduces brightness by 50%

Brighter (1.5)

Brighter background

Increases brightness by 50%

Much Darker (0.3)

Very dark background

Heavy brightness reduction

Very Bright (2.0)

Maximum brightness

Doubles the brightness