CSS Filter: Photoshop-like Effects in the Browser
The filter property brings Photoshop-like graphical effects directly into CSS. Use it for image adjustments like blur() or contrast(), or for complex shadows with drop-shadow(). The order of chained filters matters, as they are applied sequentially.
Why it exists
Before the filter property, achieving graphical effects like blurs, color shifts, or complex shadows required pre-processing images in an editor like Photoshop. This was static and inflexible. The filter property was introduced to give developers a native, dynamic, and hardware-accelerated way to apply these visual effects directly in the browser using CSS, enabling interactive and performance-friendly designs.
The mental model
Think of the filter property as a stack of photographic lens filters applied to an element. Each filter function (blur(), contrast(), grayscale()) is a different lens you can add to the stack. The browser renders the element, then passes that rendered image through your stack of filters, one by one, in the order you specified. The final, modified image is what gets displayed on the page.
How it works
The filter property accepts one or more filter functions as its value. Common functions include blur(radius), brightness(amount), contrast(amount), grayscale(amount), hue-rotate(angle), sepia(amount), and drop-shadow(params). Most functions take a percentage or decimal value (e.g., grayscale(50%) or grayscale(0.5)). You can chain multiple filters by space-separating them, and they will be applied sequentially from left to right. For example, filter: saturate(150%) contrast(120%) first increases saturation, then increases the contrast of the already saturated result. You can also reference complex, pre-defined filters from an SVG file using url().
When to use it
Use filter for UI effects that respond to user interaction, like desaturating inactive cards, blurring a background behind a modal, or changing image tones on hover. It's also the best way to apply a shadow to a non-rectangular shape (like a transparent PNG or an SVG), using drop-shadow() instead of box-shadow. It's excellent for adjusting image appearance without creating multiple image assets.
When not to use it
Avoid using excessive or complex filters on large elements or during animations, as this can be computationally expensive and lead to performance issues like jank or low frame rates, especially on less powerful devices. For simple opacity changes, the opacity property is often more performant than filter: opacity(). For simple rectangular shadows, box-shadow is more direct than filter: drop-shadow().
One canonical example
A common use case is to make an image grayscale and then return it to full color on hover, providing clear visual feedback.
img { filter: grayscale(100%); transition: filter 0.3s ease-in-out; }
img:hover { filter: grayscale(0%); }
This applies a full grayscale effect by default and smoothly transitions the image back to its original color when the user's cursor is over it.
Interview question
When should filter: drop-shadow() be chosen over box-shadow for applying a shadow effect?
- a.To achieve a shadow effect that is easily animated with CSS transitions.
- b.To ensure the shadow is hardware-accelerated for better performance.
- c.To apply a shadow that conforms to the irregular shape of an element's content.Correct
- d.To create multiple shadow layers on a single element with varying properties.
Why? this is the answer
The card states that filter: drop-shadow() is "the best way to apply a shadow to a non-rectangular shape (like a transparent PNG or an SVG)". While filter is hardware-accelerated, the card also advises that box-shadow is more direct and often more performant for simple rectangular shadows, making option B incorrect as a general preference.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #visual effects
- #design systems
- #performance
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles