CSS Filter

Plain English

CSS filters are like Instagram filters for UI elements — they let you blur, brighten, dim, or desaturate things without editing the original assets. The most common UI use case: blur(20px) for frosted glass effects (a translucent header blurring the content beneath it). Brightness and grayscale are useful for showing disabled or inactive states on images. The filter property is applied on top of the rendered element.

Technical

The filter CSS property accepts: blur(px), brightness(%), contrast(%), grayscale(%), hue-rotate(deg), invert(%), opacity(%), saturate(%), sepia(%), and drop-shadow(). backdrop-filter applies the same effects to everything behind the element (frosted glass), not the element itself. Key performance note: filter and backdrop-filter trigger GPU compositing — use will-change: filter or transform: translateZ(0) on animated filters. backdrop-filter requires a non-transparent background to be visible.

Live Demo

Usage

Recommended values

• Frosted glass nav: backdrop-filter: blur(12px) + background: rgba(255,255,255,0.8)
• Disabled image: filter: grayscale(100%) opacity(50%)
• Image hover: filter: brightness(1.05) — subtle brightening
• Dark overlay alternative: filter: brightness(0.7) on image
• blur() values: 4px (soft), 8px (medium), 16px (strong frosted glass)

Common mistakes

• ×backdrop-filter not working — it requires a background with some opacity (not fully transparent).
• ×Heavy blur filters on animated elements causing performance issues — use will-change: filter.
• ×Using filter: blur() on text — always apply blur to image/background elements, not text.