filter
Graphic effects on an element: blur, black and white, brightness, shadow by shape.
Syntax
filter: function() …;Values
| Parameter | Type | Description |
|---|---|---|
| blur() | function | Blur: `blur(4px)`. |
| grayscale() | function | Black and white: `grayscale(1)`. |
| brightness() | contrast() | function | Brightness and contrast: `brightness(1.2)`. |
| drop-shadow() | function | A shadow that follows the shape of the content, including transparent PNGs. |
Examples
Different filters on one photo:
<style>
img { width: 90px; margin: 4px; }
</style>
<img src="/media/photo-200x200.jpg" alt="">
<img src="/media/photo-200x200.jpg" alt="" style="filter: grayscale(1);">
<img src="/media/photo-200x200.jpg" alt="" style="filter: blur(3px);">
<img src="/media/photo-200x200.jpg" alt="" style="filter: brightness(1.4) contrast(1.2);">Color on hover:
<style>
.logo { filter: grayscale(1); opacity: 0.6; transition: filter 0.3s, opacity 0.3s; width: 90px; }
.logo:hover { filter: none; opacity: 1; }
</style>
<img class="logo" src="/media/photo-200x200.jpg" alt="">Notes
Several filters are separated by spaces. filter applies to the whole element with its children; for the background behind an element, use backdrop-filter.
See also
- backdrop-filter — Applies filters to everything behind the element — the frosted glass effect.
- mix-blend-mode — How the colors of an element mix with what lies beneath it, as layer modes in a graphics editor.
- box-shadow — A shadow around the element's box.
Related recipes
In the tutorial
- Filters — The filter property — blur, black and white, brightness, contrast and the contour shadow drop-shadow, plus backdrop-filter for a frosted glass effect.