Design · 4 min read
CSS Filter Effects: Blur, Grayscale, Brightness, and More
The CSS filter property applies photo-editing effects — blur, brightness, contrast, grayscale, and more — to any element, live in the browser. No image editor or extra files needed.
Try it yourself with the related tool.
Try CSS filters →Advertisement
The filter functions
blur(4px) softens the element. brightness(1.2) and contrast(1.1) work like their photo-editor namesakes, where 1 means unchanged. grayscale(1), sepia(1), and invert(1) apply fully at 1. saturate(2) doubles colour intensity, and hue-rotate(90deg) shifts every colour around the colour wheel.
Order matters
Several functions can be chained — filter: grayscale(1) brightness(1.2) — and they apply left to right, each to the result of the previous one. Swapping the order of contrast and brightness, for example, gives a visibly different result.
drop-shadow vs box-shadow
box-shadow always follows the element's rectangular box. filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.3)) follows the actual visible pixels, so it hugs the outline of a transparent PNG or an SVG icon. It has no spread value and cannot be inset.
Practical uses and backdrop-filter
Common uses include greying out disabled items, dimming images on hover, and inverting icons for dark mode. filter changes the element itself; backdrop-filter changes what is behind it, which is how frosted-glass panels are made. Filters, especially blur, can be costly on large areas, so test scrolling on slower devices.