Blurring an image, darkening it slightly on hover, turning it black and white: these are adjustments naturally associated with photo-editing software. filter applies them in a single line, directly in the browser, without ever touching the original image file.
The name, however, is easy to confuse with a much older and far more verbose SVG mechanism that happens to share the exact same name.
Definition
filter applies one or more visual effects to an element's rendering, text and children included, without changing the layout or the source file. Its default value is none. Each effect is a function, and several functions can be combined by separating them with a space inside a single declaration.
.memory-photo {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.memory-photo:hover {
filter: grayscale(0%);
}The most commonly used functions
Each function tweaks one specific aspect of the render, almost always taking a percentage or a length unit as its argument.
| Function | Effect |
|---|---|
blur(8px) | Blurs the render over the given distance |
brightness(150%) | Lightens or darkens (100% is neutral) |
contrast(120%) | Widens or narrows the gap between light and dark tones |
grayscale(100%) | Gradually strips color saturation |
drop-shadow(0 4px 6px rgba(0,0,0,0.3)) | A cast shadow that hugs the real shape, transparency included |
Stacking several filters
Several functions combine inside a single declaration, applied in the order they are written: each function receives the result already transformed by the previous one. On filters like brightness() and contrast(), order can slightly change the final render, which is worth testing visually rather than assuming.
.muted-thumbnail {
filter: grayscale(60%) brightness(110%) contrast(105%);
}blur() in particular puts heavy load on the graphics processor, especially on a large element or on many elements animated at once. On a scrolling list with lots of thumbnails, prefer a light blur, test on an actual mobile device, and consider will-change if the effect is meant to be animated.hue-rotate() for a dynamic color palette
hue-rotate(180deg) rotates every hue in an image or a gradient around the color wheel, without touching their lightness or saturation. It is a quick technique for spinning several color variants out of a single visual, for example to illustrate different categories of the same product without storing a separate image per color. The result stays approximate compared to a real file-by-file edit, but it is more than enough for a status badge or an icon reused across several contexts of the same interface.
CSS filter versus SVG's <filter>
SVG has its own filter system, built on primitives like feGaussianBlur or feColorMatrix, declared inside a <filter> block within <defs>, then applied with the filter="url(#myFilter)" attribute on an SVG element. It is a far more powerful tool, capable of custom combinations that the ready-made CSS functions cannot reproduce, but much longer to write for a simple blur or grayscale. The CSS filter property can actually reference a custom SVG filter this way: filter: url(#myFilter), which lets you combine the simplicity of CSS functions with the power of the SVG system when it is genuinely needed.
Frequently asked questions
filter only work on images?No, it applies to any element, including text, a colored box, or a video, since it acts on the final render rather than on a specific content type. An entire heading, for instance, can receive a drop-shadow() without ever touching box-shadow.
transition?Yes, and it is one of the property's most common uses: going from grayscale(100%) to grayscale(0%) on hover, with a transition declared on filter, produces a color that gradually comes back, widely used on image galleries.
filter and mix-blend-mode do the same thing?No, they answer different questions. filter transforms the element's own render, independently of whatever is behind it. mix-blend-mode, on the other hand, blends that element with whatever sits behind it, which makes it a complementary tool rather than a substitute.