CSS Filter Generator
Drag sliders for blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, and opacity, watch a live preview, and copy the exact CSS filter line.
- Free, no account
- No watermark
- No usage limit
About the CSS Filter Generator
Most CSS filter generators have a habit that's genuinely annoying. You drag one slider, bump the brightness a little, and they hand back the entire chain, all nine functions, including the eight you never touched: blur(0px) brightness(1.1) contrast(1) grayscale(0%) sepia(0%) saturate(1) hue-rotate(0deg) invert(0%) opacity(1). Every one of those (1) and (0%) values does exactly nothing. You paste it into your stylesheet anyway, and six months later whoever opens that file has to squint to work out that only the brightness ever mattered.
This one drops every no-op. Leave a slider at its default and that function stays out of the output entirely. Change three filters and you get a clean three-function line, nothing padded on. That's the main reason to reach for it over the generator built into most editors.
The rest is what you'd expect. Nine sliders (blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, opacity), a live preview that reacts as you drag, and a copy button for the exact filter: line. The preview renders with the identical string it prints, so what you see on the sample is what lands on your real element, no drift between the two. It runs in your browser, nothing gets uploaded, and there's no sign-up.
How to use
- Drag any slider. The instant a value leaves its default, that function shows up in the CSS below, and a dot appears next to the label so the active filters are easy to spot.
- Watch the sample. The colorful preview updates live with every active filter combined. It sits on a checkerboard on purpose, that way opacity and lightening filters stay visible instead of fading into a plain white background where you can't judge them.
- Stack as many as you want. Blur and brightness and a hue shift all together is fine. They chain in the order shown on the page.
- Load a preset for a starting point. Vintage, B&W, Dim, Warm, Cold, Negative, and Frosted each drop in a tuned combination you can fine-tune from there.
- Copy the line and paste it onto your element. Reset sends every slider back to its no-op value and clears the output to
filter: none.
Why a clean filter line is worth it
A bloated filter string costs you down the line. When every generated line carries all nine functions, you lose the one signal that actually helps later: intent. A line that reads filter: contrast(1.3) saturate(1.4) tells the next person exactly what this element is doing and nothing else. A line with nine functions where seven are no-ops buries that under noise, and when a filter looks wrong and you're reading the chain to debug it, three functions to scan beats ten every time.
So the way to get the most out of this: change only what you mean to change, and trust the output. A function that appears in the copied line is doing something, and anything missing from it is sitting at its default. That maps one to one, which is the entire point of dropping the no-ops.
Order runs left to right
Filters in a chain run left to right, and each one works on the result of the one before it. Swap two functions and you can get a genuinely different image out, which is a common reason a filter comes out looking wrong.
Grayscale plus sepia is the clearest example. Write filter: grayscale(100%) sepia(100%) and you strip all the color first, then the sepia tints that gray, and you land on a clean sepia photo. Flip it to sepia(100%) grayscale(100%) and you tint first, then immediately grayscale the warmth right back out, leaving plain black-and-white. You get the opposite image from the same two functions, purely because of the order.
This tool always chains in the order the sliders appear above, so its output stays predictable. CSS itself has no fixed order to obey, the browser just applies whatever you wrote from left to right, so once the line is in your stylesheet the order is yours. When a combination isn't giving you what you expect, try reordering the copied line before you start changing the values.
A few functions that trip people up
Blur takes a length, so blur(5) with no unit is invalid and gets ignored, it has to be blur(5px). Blur is also the only one that visibly spreads past the element's own box, which matters for layout and for performance. Hue-rotate takes degrees, not a percentage, so hue-rotate(180deg) spins every color to roughly its opposite. And brightness, contrast, and saturate all go above 100% (above 1), which is how you fake an overexposed glow or push colors toward neon, something a value capped at 100 could never do.
Handy combinations
A few patterns worth stealing. Ship image thumbnails at grayscale(100%) and transition them to grayscale(0) on hover for a gallery that comes alive when you point at it. Drop brightness(0.7) contrast(1.1) over a background photo to darken it enough that white text on top stays readable, without exporting a second darkened copy of the image. And invert(1) hue-rotate(180deg) is the quick single-image dark-mode trick, it flips a light diagram or logo dark while keeping the colors roughly sane. The presets are a faster on-ramp to most of these.
Frequently asked questions
What's backdrop-filter, and why isn't it in here?
filter changes the element it's on, its content, its background, and everything nested inside it. backdrop-filter leaves the element alone and blurs or tints whatever sits behind it, showing through a partly transparent element. That's the frosted-glass effect on navigation bars and translucent panels. This tool generates plain filter only, because backdrop-filter needs a transparent element and a real background behind it to preview against, which a neutral sample can't fake honestly. The function names and values are identical though, so a blur(10px) you dial in here works just as well as backdrop-filter: blur(10px).
Why does the tool print brightness(1.2) but sepia(60%)?
Both are the same value written two different ways. The browser reads 1.2 and 120% exactly the same. This tool prints the multiply-style filters (brightness, contrast, saturate) as decimals because a multiplier reads clearer that way, saturate(2) obviously means twice the color. The amount-style ones (grayscale, sepia, invert, opacity) print as percentages, since sepia(60%) reads as "60 percent of the way there." Blur is always pixels and hue-rotate is always degrees, neither has a percentage form. To convert between the two, multiply or divide by 100.
Do CSS filters slow a page down?
Static filters on a normal number of elements are cheap, they run on the GPU in every current browser. The cost shows up with heavy blur and with animation. Blur samples a wide neighborhood of pixels for every output pixel, so a big radius gets expensive fast, and animating a large blur across a big element is what makes low-end phones stutter. If you animate, keep the blur radius modest and test on an actual mid-range phone, not just your desktop.
Can I animate these smoothly?
Yes, filters transition and keyframe fine. Put a transition: filter 0.3s ease on the element and change the value on :hover or a state class and it tweens between them. One catch that eats time: don't animate to or from the keyword none, because it doesn't interpolate. A hover that fades in a blur should go from blur(0) to blur(8px), both explicit values, not from none to a blur.
Does a filter apply to text and child elements too?
Yes. filter hits the element and everything inside it, so blurring a card blurs its text, its background, and its icons all at once. Usually that's what you want for a disabled look or a behind-a-modal blur. When it isn't, put the filter on a sibling or a background layer rather than the container, otherwise the child text goes soft along with everything else.
Where's drop-shadow? The spec has it.
Left out on purpose. drop-shadow() takes offset, blur, and color arguments, which a single slider can't capture well, so it belongs in its own generator. The url() filter function is skipped for the same reason, it points at a custom SVG filter and there's nothing to slide. The nine functions here are the ones a slider-and-preview setup actually fits.
Which browsers handle these?
Plain filter and all nine functions here have worked unprefixed in Chrome, Firefox, Safari, and Edge for years, on desktop and mobile. The one to check is backdrop-filter, which landed later and needed a -webkit- prefix in Safari for a long stretch. It's widely supported now but still a notch behind plain filter, so verify it if you're targeting older browsers.