The CSS filter property changes an element’s rendered appearance with effects such as blur, color adjustment, opacity changes, and shadows. It affects the entire element, including its text, borders, children, and background. section 14.1
Blur an image
Apply a five-pixel blur to an image with `img { filter: blur(5px); }`. The blur function accepts a length: `0px` leaves the image unchanged, while larger values create a stronger smudge. Adjust the value in DevTools to compare readable detail with an indistinct impression. section 14.1
Combine filter functions to tune an effect:
- Use functions for blur, brightness, contrast, grayscale, hue rotation, opacity, saturation, sepia, inversion, and drop shadows. section 14.1.1
- Pass percentages as percentages or decimals; omitted percentage parameters default to 100%. section 14.1.1
- Separate multiple functions with spaces, as in `filter: blur(5px) sepia(20%)`; apply them from left to right. section 14.1.1
De-emphasize other gallery images
A gallery can blur and desaturate every image on hover, then restore the hovered image: `.gallery:hover img { filter: blur(2px) grayscale(50%); }`, `.gallery img:hover { filter: none; }`. Add `.gallery img { transition: filter 1s; }` so the change happens gradually rather than distracting with an instant switch. Subtle values usually preserve the intended focus better. section 14.1.1
Table 14.1 Filter functions
|
Function example
|
Description
|
Parameter(s)
|
|---|---|---|
blur(10px)
|
Applies a Gaussian blur
|
The higher the length, the stronger the blur effect.
|
brightness(150%)
|
Increases or decreases the brightness
|
A value lower than 100% reduces the brightness; a value greater than 100% increases it.
|
contrast(150%)
|
Increases or decreases the contrast
|
A value lower than 100% reduces contrast (fades the image); a value greater than 100% increases it.
|
drop-shadow(10px 10px 15px black)
|
Adds a drop shadow, similar to the
box-shadow property
|
The first two parameters are lengths indicating the x- and y-offsets, respectively. The third is a blur amount (optional). The fourth is a color (optional). Unlike the
box-shadow property, the spread radius value and
inset keyword are not supported.
|
grayscale(50%)
|
Desaturates the color
|
A value between 0% and 100%, which produces a fully grayscale image.
|
hue-rotate(30deg)
|
Shifts the hue value of every pixel
|
Any angle indicating how far around the color wheel to shift colors.
|
invert(100%)
|
Inverts the colors
|
A value of 100% completely inverts the colors. A value between 0% and 100% applies the effect at the indicated strength.
|
opacity(50%)
|
Makes the element transparent, similar to the
opacity property
|
A value of 0% makes the element completely transparent; 100% is fully opaque.
|
saturate(150%)
|
Increases or decreases the color saturation
|
Values higher than 100% increase the image color saturation; values lower than 100% desaturate the image.
saturate(25%) is equivalent to grayscale(75%).
|
sepia(100%)
|
Replaces color with a sepia-tone effect
|
A value between 0% and 100%, controlling the strength of the effect.
|
Browse the filter-function table for effect descriptions and parameter behavior. section 14.1.1
