CSS Tools
Inar CSS Filter Generator
Inar CSS Filter Generator is a free online tool for creating and customizing CSS filter effects. Easily adjust blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia filters, then copy the generated CSS code for your web projects.
Inar CSS Filter Generator
Build, preview and copy filter and backdrop-filter values
Stack blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow with live sliders and see the result immediately on a colour scene, a UI card, a swatch grid, a frosted-glass panel or your own uploaded image. Compare before and after with split, side-by-side or toggle modes, reorder the filter chain, scale the whole effect with an intensity multiplier, and export as CSS, SCSS, Tailwind, JavaScript, React, styled-components or JSON. 40+ professional presets cover film stocks, cinematic grades, UI states and accessibility aids. Everything runs locally in your browser — nothing is uploaded.
Preview
filterProduct card
Filter the entire card — including its text, shadow and border — to judge legibility.
Product card
Filter the entire card — including its text, shadow and border — to judge legibility.
Filter chain
0 activeGenerated code
Filter value
none
Paste any filter value here and press Enter — the sliders rebuild themselves.
Try a different search term or clear the category filter.
Saved presets
Recent filters
What Is a CSS Filter Generator?
Ten functions, one property, endless combinations.
A CSS filter generator lets you build the value of the CSS
filter property interactively and see the result immediately. The property
accepts a space-separated list of filter functions — blur(),
brightness(), contrast(), grayscale(),
hue-rotate(), invert(), opacity(),
saturate(), sepia() and drop-shadow() — and the
browser applies them in order, left to right.
Because each function is a simple numeric transform, filters compose beautifully. A vintage
look is a little sepia(), a little saturate() and a slight
contrast() reduction. A dramatic look is more contrast() and less
brightness(). The hard part is guessing the numbers — which is exactly what a
generator solves.
This tool gives you a slider for every function with a gradient track showing what the range does, a live preview on a full-colour scene, and a draggable before/after split so you can judge the effect honestly rather than adapting to it. You can reorder the filter chain, scale the whole effect with an intensity multiplier, upload your own image, and export the result as CSS, SCSS, Tailwind, JavaScript, React, styled-components or JSON.
Everything runs inside your browser. Your filter values are never uploaded, never logged and never stored on a server. Only your current state and saved presets are written to this browser's local storage, and you can clear them at any time.
The Ten Filter Functions
What each one does, and the range that makes sense.
Every function takes a single argument. Nine of them accept a percentage or a number; the
tenth, drop-shadow(), takes an offset, a blur radius and a colour. The defaults
in the table below are the values at which the function has no effect.
| Function | No effect at | Useful range | What it does |
|---|---|---|---|
| blur(px) | 0 | 0 – 20px | Gaussian blur. Most expensive filter by a wide margin. |
| brightness(%) | 100% | 0 – 200% | Multiplies each channel. 0% is black, 200% is roughly double. |
| contrast(%) | 100% | 0 – 200% | Pushes values away from mid-grey. 0% is flat grey. |
| grayscale(%) | 0% | 0 – 100% | Blends toward luminance. 100% is fully grey. |
| hue-rotate(deg) | 0deg | 0 – 360deg | Rotates the hue wheel. 180deg is the complement. |
| invert(%) | 0% | 0 – 100% | Inverts each channel. 100% is a photographic negative. |
| opacity(%) | 100% | 0 – 100% | Overall transparency. Cheaper than the opacity property when stacking filters. |
| saturate(%) | 100% | 0 – 300% | Colour intensity. 0% is grey, above 100% is more vivid. |
| sepia(%) | 0% | 0 – 100% | Blends toward a warm brown tone. |
| drop-shadow() | — | 0 2px 6px | Shadow that follows the element's alpha channel, unlike box-shadow. |
Filters apply left to right and the order changes the result. grayscale(100%) sepia(50%)
gives a warm monochrome; sepia(50%) grayscale(100%) gives pure grey, because the
grayscale runs last. Use the up and down arrows on each row to reorder the chain and see the
difference immediately.
filter transforms the element and its children. backdrop-filter
transforms whatever is painted behind the element, which is how frosted glass is
built. Both accept the same functions — the property toggle in the output panel switches the
emitted property name, and the Glass preview mode shows a real backdrop-filter demo.
Filters create a containing block. Any element with a non-none
filter becomes the containing block for absolutely positioned descendants, and creates a
new stacking context. That is almost always fine — but it will surprise you if a
position: fixed child was supposed to escape to the viewport.
Features
Everything the generation needs, and the details that make it usable.
Ten live sliders
One slider per function, each with a gradient track showing what the range does.
Reorderable filter chain
Move any function up or down in the chain — order changes the result.
Three comparison modes
Split slider, side by side, or filtered only. Drag the split or use arrow keys.
Intensity multiplier
Scale the whole effect from 25% to 200% without touching individual sliders.
Custom image upload
Drop in your own photo and preview the filter on the content that matters.
40+ professional presets
Film stocks, cinematic grades, UI states, accessibility aids — each shown as a live thumbnail.
Save custom presets
Name a filter and it stays in your browser, ready to load with one click.
Filter history
The last 12 filters you applied are kept locally for quick recall.
Eight output formats
CSS, custom properties, SCSS mixin, Tailwind, JS, React, styled-components and JSON.
Performance hints
Optionally emit will-change, isolation, contain or a GPU layer hint.
Export standalone demo
Download a complete HTML file with the filter applied, ready to open or share.
Privacy first
100% client-side. Nothing you build ever leaves your browser.
How to Use the Generator
Five steps from a blank slider to a value you can ship.
Pick a preview mode
Start with Scene to judge colour shifts, switch to Swatches to see how the filter treats saturated colours and neutrals, use UI card when you care about text legibility, or upload your own image for real-world content.
Turn on a filter
Flip the switch next to a function, then drag the slider. The gradient track behind the thumb shows the direction of the effect. Use the arrows on the left to reorder the chain — order matters.
Scale with intensity
Once you have a look you like, use the Intensity selector to scale the whole effect from 25% to 200% without retuning individual sliders.
Compare honestly
Switch between Split, Side by side and Filtered only. Your eye adapts to a filter within seconds — the only reliable test is to flip between the two views.
Copy or export
Choose a format in the output panel and press Copy. To ship a demo, press Export demo for a standalone HTML file. To hand the exact look to a teammate, press Share for a link that rebuilds it.
Practical Tips
Things worth knowing before you ship a filter.
Blur is expensive
A blur() filter on a large element forces per-pixel processing and re-compositing on every frame. Animate it only on small areas, and use will-change: filter only while the animation runs.
Filters do not change layout
filter is a paint-time effect. It does not affect the element's box, its flow, or its neighbours — so a blurred image still occupies its original space. Use transform if geometry needs to change.
Never rely on hue alone
hue-rotate() can make a "red" error state look green. If colour carries meaning, pair it with an icon or a label — filters can silently break a colour-coded interface for anyone, not just colour-blind users.
Filters are not colour-managed. They apply in the browser's working colour space, which on most systems is sRGB. If your image is in Display P3 or Adobe RGB, a filter can shift it in ways you did not intend. Convert to sRGB first if exact colour matters.
Frequently Asked Questions
The questions people ask most about CSS filters.
Is my data uploaded anywhere?
No. Every slider, preset and output format is generated inside your browser. Nothing is sent to a server. Only your current state and saved presets are written to this browser's local storage.
Do filters work on text?
Yes. filter applies to the element and all of its rendered content, including text, borders, backgrounds and child elements. The UI card preview is useful for judging exactly how much contrast a filter removes from body copy.
What is the difference between filter and backdrop-filter?
filter transforms the element itself. backdrop-filter transforms whatever is painted behind the element, which is how frosted glass is built. Both accept the same functions. The property toggle switches between them, and the Glass preview demonstrates backdrop-filter properly.
Why does the order of functions matter?
Because filters apply left to right and each operates on the output of the previous one. grayscale(100%) sepia(50%) produces a warm monochrome, while sepia(50%) grayscale(100%) produces plain grey. Use the up and down arrows to reorder the chain.
Does filter affect layout or performance?
It does not affect layout — the element keeps its original box. It does affect performance: blur() and drop-shadow() are the most costly, and an animated filter forces a repaint of the affected area on every frame.
What does the intensity multiplier do?
It scales the whole effect from 25% to 200% without touching individual sliders. Technically it moves each function's value toward or away from its neutral point — so contrast(150%) at 50% intensity becomes contrast(125%), and blur(8px) at 50% becomes blur(4px).
What does drop-shadow do differently from box-shadow?
box-shadow draws a rectangular shadow around the border box. drop-shadow() follows the element's alpha channel, so a transparent PNG or an SVG shape gets a shadow that traces its actual silhouette.
Are CSS filters supported everywhere?
The filter property is supported in every modern browser with no prefix. backdrop-filter is also broadly supported now, though older Safari versions require -webkit-backdrop-filter. The output panel has a toggle for that prefix.
Can I save presets?
Yes. Press Save preset in the toolbar, give the filter a name, and it appears in the My presets tab. Saved presets are stored in this browser's local storage and can be loaded or deleted at any time.
Is the CSS Filter Generator free?
Yes. It is completely free to use, with no account, no sign-up and no usage limits.
More Inar Developer Tools
More free, privacy-friendly tools from Inar Learn — built for developers and learners.
Inar Learn