The CSS filter property
The CSS filter property applies graphical effects to an element using functions like blur(), brightness(), contrast(), grayscale() and drop-shadow(). For example filter: blur(4px) softens an image. You can chain several functions in one value, and they apply in order.
Overview
filter applies image-editing effects directly in CSS — the kind of thing that once meant exporting a separate blurred or desaturated copy of an image. Now you write filter: blur(4px) or filter: grayscale(100%) and the browser does it live, on any element, not just images.
Each effect is a function: blur() softens, brightness() and contrast() adjust tone, grayscale() and sepia() shift color, and drop-shadow() casts a shadow that follows the element's actual shape rather than its rectangular box — which is why it beats box-shadow for irregular PNGs and icons. You can chain them: filter: grayscale(100%) brightness(1.1) applies one then the other.
Because filters can be animated and combined with transitions, they are a favorite for hover effects — a photo that sharpens from grayscale to full color, for instance. There is also backdrop-filter, the related property that blurs whatever is behind a semi-transparent element, which is how the frosted-glass look is built.
Syntax
selector {
filter: function(value);
}
/* desaturate, then brighten on hover */
.thumb {
filter: grayscale(100%);
transition: filter 0.3s;
}
.thumb:hover {
filter: grayscale(0);
}Values
The filter property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
blur() |
Softens the element, e.g. blur(4px). |
brightness() |
Lightens or darkens, e.g. brightness(1.2) for 120%. |
contrast() |
Increases or reduces contrast, e.g. contrast(1.4). |
grayscale() |
Desaturates toward gray, e.g. grayscale(100%). |
drop-shadow() |
A shadow that follows the element's shape, not just its box. |
Example
<style>
.row { display: flex; gap: 12px; justify-content: center; font: 600 12px system-ui, sans-serif; text-align: center; }
figure { margin: 0; }
.row img { width: 110px; height: 90px; object-fit: cover; border-radius: 8px; display: block; }
.b img { filter: blur(3px); }
.g img { filter: grayscale(100%); }
.c img { filter: contrast(1.5) brightness(1.1); }
</style>
<div class="row">
<figure class="b"><img src="https://picsum.photos/200/160" alt=""><figcaption>blur</figcaption></figure>
<figure class="g"><img src="https://picsum.photos/200/160" alt=""><figcaption>grayscale</figcaption></figure>
<figure class="c"><img src="https://picsum.photos/200/160" alt=""><figcaption>contrast</figcaption></figure>
</div>Best practices
- Chain functions in one declaration, e.g.
filter: grayscale(100%) brightness(1.05)— they apply left to right. - Use
drop-shadow()instead of box-shadow when you need a shadow that hugs a transparent PNG or icon shape. - Animate filters with a transition for hover effects, but test performance — heavy blurs can be costly on large areas.
- Reach for
backdrop-filter: blur()when you want to frost the background behind a translucent panel rather than the panel itself.
Frequently asked questions
How do I blur an element in CSS?
filter: blur(4px). A larger radius blurs more. It works on any element, including images and whole containers.How do I make an image black and white in CSS?
filter: grayscale(100%). A value between 0 and 100% gives a partial desaturation, which is handy for hover effects.What is the difference between filter and backdrop-filter?
filter affects the element itself; backdrop-filter affects whatever is behind a semi-transparent element — the basis of the frosted-glass effect.Can I combine multiple filters?
filter: contrast(1.2) brightness(1.1) saturate(1.3). They apply in the order written.