Syntax
filter: blur() brightness() contrast() grayscale();Examples
Common Filter Functions
Blurring, adjusting brightness, and desaturating an image.
.blurred { filter: blur(5px); }
.dimmed { filter: brightness(0.7); }
.grayscale { filter: grayscale(100%); }
.high-contrast { filter: contrast(1.4); }
/* Chaining multiple filters together */
.vintage { filter: sepia(0.5) contrast(1.1) brightness(0.9); }backdrop-filter for Frosted Glass
Applying a blur to whatever is BEHIND a semi-transparent element - the popular glassmorphism effect.
.glass-panel {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}Parameters and values
- blur() (length): Gaussian blur effect
- brightness() (percentage): Adjusts lightness, 100% is unchanged
- grayscale() (percentage): Desaturates the element
- backdrop-filter (same functions): Applies filters to content behind the element, not the element itself
Best practices
- Use backdrop-filter specifically for frosted-glass effects over background content - filter alone only affects the element itself, not what is behind it
- Chain multiple filter functions in one declaration for combined effects, rather than nesting elements to stack filters
- Be mindful of performance - filters, especially blur, can be expensive to render on large areas or during animation
- Test backdrop-filter with an actual background behind the element - it has no visible effect over a plain solid background
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Transitions
Transitions smoothly animate a property change over a specified duration, rather than the change happening instantly. They require a property to transition, a duration, and typically a timing function that controls the pace of the animation - useful for hover effects, state changes, and general UI polish.Animations & @keyframes
@keyframes defines a named sequence of styles at different points (0% to 100%) of an animation, which is then applied to an element via the animation property. Unlike transitions, which only animate between two states, keyframe animations can define arbitrarily complex multi-step sequences and loop indefinitely.Transforms
transform lets you visually move, rotate, scale, or skew an element without affecting the document flow of surrounding elements - unlike changing position/width directly. Multiple transform functions can be combined in a single declaration, and transform-origin controls the pivot point for rotation and scaling.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.
Transitions smoothly animate a property change over a specified duration, rather than the change happening instantly. They require a property to transition, a duration, and typically a timing function that controls the pace of the animation - useful for hover effects, state changes, and general UI polish.Animations & @keyframes
@keyframes defines a named sequence of styles at different points (0% to 100%) of an animation, which is then applied to an element via the animation property. Unlike transitions, which only animate between two states, keyframe animations can define arbitrarily complex multi-step sequences and loop indefinitely.Transforms
transform lets you visually move, rotate, scale, or skew an element without affecting the document flow of surrounding elements - unlike changing position/width directly. Multiple transform functions can be combined in a single declaration, and transform-origin controls the pivot point for rotation and scaling.Flexbox
Flexbox (Flexible Box Layout) is a powerful one-dimensional layout system in CSS that makes it easy to design flexible and responsive layouts. It provides an efficient way to distribute space and align items in a container, even when their sizes are unknown or dynamic. Flexbox is particularly useful for creating navigation bars, card layouts, and centering content.