The filter property applies graphical effects such as blur, brightness, contrast, grayscale, and drop-shadow to an element’s rendered result — including its contents, borders, and backgrounds.
Use one or more filter functions, or an SVG filter via url(). Filters run in the order you list them. The property is not inherited.
Not deprecated. Core filter functions are widely supported. SVG url() filters can vary by browser.
filter: none | <filter-function>+ | url(...);Example: filter: grayscale(80%) blur(2px);. Invalid function arguments make the whole value act like none.
| Value | Description | Try it |
|---|---|---|
none | No filter. Initial value | Try it |
blur() | Gaussian blur. Length such as 4px | Try it |
brightness() | Brighten or darken. 100% / 1 is unchanged | Try it |
contrast() | Adjust contrast. Values over 100% increase it | Try it |
grayscale() | Desaturate toward gray. 100% is fully gray | Try it |
sepia() / hue-rotate() | Warm sepia tone, or rotate hues by an angle | Try it |
drop-shadow() | Shadow that follows the alpha shape (not a box shadow) | Try it |
Multiple / url() | Chain functions in order, or reference an SVG filter | Try it |
Also available: invert(), opacity(), and saturate(). Percent and number forms often both work (for example 0.5 = 50%).
filterPick an effect, apply it to the element, then chain more only if you need them.
blur(4px) or grayscale(100%).backdrop-filter when you want to blur what is behind a translucent panel.| Piece | Required? | Role |
|---|---|---|
Filter function or url() | Yes (or none) | Defines the visual effect |
| Order | Matters when chained | Functions run left to right |
| Inherited | No | Set on each filtered element |
| Valid arguments | Yes | One invalid function can cancel the whole list |
Change filter and watch the sample box update.
Each snippet focuses on filter. Use Try It Yourself for a live editor.
Soften an element with a Gaussian blur.
<style>
.soft {
filter: blur(4px);
}
</style>
<div class="soft">Blurred</div>.soft.blur(4px). Larger lengths blur more.0 in the editor to clear the blur.Desaturate colors toward gray.
<style>
.muted {
filter: grayscale(100%);
}
</style>
<div class="muted">Gray</div>grayscale(100%). Full desaturation.50% keeps some color.Combine functions; order matters.
<style>
.look {
filter: contrast(120%) saturate(140%);
}
</style>
<div class="look">Chained</div>If a filter looks wrong or disappears, check these first.
filter changes the element itself. backdrop-filter changes only what shows through it (frosted glass).
If any function has an invalid parameter, the property computes to none. Check units (px, deg, %).
drop-shadow() follows the alpha outline. It has no inset or spread like box-shadow.
Large blurs on big layers can be expensive. Prefer smaller radii and avoid animating huge filtered areas when possible.
Grayscale or hue shifts are visual only. Pair status with text or icons so color-blind users still understand.
filter is a browser CSS property for visual effects. Node.js, Deno, and Bun do not apply it.
Core filter functions work in all modern browsers. SVG url() filters may differ by engine.
Bottom line: Safe for everyday blur, grayscale, and color filters. Verify SVG url() filters on target browsers. It is not a runtime API.
none. Not inherited.backdrop-filter instead.One line: filter restyles how the element looks — blur, color, shadow — without changing layout.
Grow, shrink, and set the basis of flex items.
8 people found this page helpful