Skip to main content
toolk.site

CSS Filter Generator with Live Preview — Blur, Saturate, Hue-Rotate & More

Dial in the nine CSS filter functions — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia — with a before/after preview on a sample or uploaded image, then copy the CSS or Tailwind v4 output. Free and 100% client-side.

Original
Original image
Filtered · none
Filtered image preview
Preview image:
Blur0px
Brightness100%
Contrast100%
Grayscale0%
Hue Rotate0deg
Invert0%
Opacity100%
Saturate100%
Sepia0%
Vanilla CSS
.filtered {
  filter: none;
  -webkit-filter: none;
}
Tailwind v4
(no filters applied — all neutral)

Nine Filter Knobs

Independent sliders for blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. Neutral values are auto-omitted from output for clean CSS.

Preview on Real Images

Switch between two sample photos (landscape, portrait) or upload your own. Filter applies via the same CSS property a browser would use — no canvas rasterization, no quality loss.

CSS + Tailwind v4

Get vanilla CSS (with -webkit-filter Safari fallback) and a Tailwind v4 utility class string. Paste straight into your stylesheet or JSX className.

100% Client-Side

Custom images stay local — no uploads to any server. All preview rendering runs in the browser via the native CSS filter property.

CSS Filter Generator: Build a filter String Visually

A CSS filter generator turns slider values into a ready-to-paste filter string. Adjust the nine functions — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia — watch a live before/after on a sample or uploaded image, then copy vanilla CSS (with a -webkit-filter fallback) or a Tailwind v4 class string. It runs 100% in your browser and free; uploaded images never leave your device.

How to generate a CSS filter

  1. Pick a preview image — the Landscape or Portrait sample, or upload your own with Custom.
  2. Drag any of the nine sliders; the filtered panel updates instantly beside the original.
  3. Or click a preset (Vintage, Black & White, Vibrant, Dramatic, Cold, Warm) to load a tuned combination, then fine-tune from there.
  4. Copy the Vanilla CSS block for stylesheets, or the Tailwind v4 string for a JSX className.
  5. Hit Reset to return every slider to its neutral value and clear the custom image.

What is the CSS filter property and how does it work?

The CSS filter property applies graphical effects to an element and its descendants without altering the source file. Functions are space-separated and applied left to right, each operating on the output of the previous one, so grayscale(100%) sepia(50%) differs from sepia(50%) grayscale(100%). The browser composites the result on the GPU and caches it, so a static filtered image renders at roughly the cost of the unfiltered one. It is defined in the MDN filter reference (CSS Filter Effects Module Level 1) and has been unprefixed in every major browser since 2015–2016.

This tool omits any function left at its neutral value — brightness(100%), blur(0px), hue-rotate(0deg) — so the output stays a clean string instead of a list of no-ops. When every slider is neutral, the value is simply none.

Worked examples: settings → CSS

Black & White preset

filter: brightness(105%) contrast(110%) grayscale(100%);

LQIP loading blur

filter: blur(8px); /* transition to none when the full image loads */

Dark-mode icon flip · Tailwind v4

invert-[100%] hue-rotate-[180deg]

Edge case · filter traps position: fixed

Any non-none filter value creates a stacking context and a containing block for position: fixed descendants. A fixed modal or sticky header nested inside a filtered wrapper positions relative to that wrapper, not the viewport. The W3C confirms this is intended, not a bug — move the filter to a sibling or a ::before pseudo-element to avoid it.

What Each Filter Function Actually Does

FunctionPurpose & Typical Range
blur(Npx)Gaussian blur. 5px = subtle, 15px = heavy. Useful for backgrounds behind text overlays.
brightness(N%)0% = black, 100% = unchanged, 200% = doubled. Use sparingly; high values blow out highlights.
contrast(N%)0% = gray, 100% = unchanged. 110-140% adds punch to flat-looking photos.
grayscale(N%)Removes color saturation. 100% = full B&W. Combine with contrast boost for editorial look.
hue-rotate(Ndeg)Rotates the hue wheel. 180deg inverts complementary; small shifts warm/cool the image.
invert(N%)Color negative. 100% = full invert. Useful for dark-mode icon tinting.
opacity(N%)Same as the opacity CSS property but composable with other filters in one pass.
saturate(N%)0% = grayscale, 100% = unchanged, 200% = oversaturated. The most common "make photo pop" knob.
sepia(N%)Brown tint, warmest of the built-in effects. 30-50% gives the classic faded-photo look.

Functions are space-separated and applied left to right in a single pass. Leave any function at its neutral value and this tool drops it from the output for a clean string.

Browser Support in 2026

BrowserStatusNotes
Chrome 53+FullUnprefixed; GPU-accelerated
Firefox 35+FullUnprefixed since v35 (2015)
Safari 9.1+FullOlder versions require -webkit-filter prefix
Edge 12+FullNative since Chromium-based Edge
Samsung Internet 6+FullFull Android support

Combined market share of fully-supporting browsers: ~99% globally per caniuse.com as of 2026. Safe to use unprefixed in production; emit -webkit-filter for older WebKit compatibility.

The drop-shadow blur trap most tutorials skip

drop-shadow() looks like box-shadow, but its blur value is a standard deviation, equal to roughly half the box-shadow blur-radius. So drop-shadow(0 0 4px black) is about as soft as box-shadow: 0 0 8px black — double the number when you port a shadow across. Per the MDN drop-shadow() reference, the function also forbids the inset keyword and the spread value, and it follows the alpha shape of the content — which is why it hugs transparent PNGs and irregular SVGs while box-shadow only ever draws a rectangle.

The second gotcha: a non-none filter creates a containing block for position: fixed descendants. If a fixed overlay suddenly anchors to the wrong box, a parent filter is usually the cause — reach for a sibling layer or a pseudo-element instead.

Where CSS Filters Pay Off

1. Hero Image Treatments

Same photo, two pages, two looks: filter brightness/contrast/saturation per route without re-uploading the asset. CDN caches a single file; CSS does the rest.

2. Hover / Disabled States

Apply grayscale(50%) on disabled icons or hover-out cards. Transitions smoothly with filter as the transition target.

3. Light/Dark Theme Adjustments

In dark mode, invert(100%) hue-rotate(180deg) flips icon colors without shipping two icon sets. Especially useful for screenshots embedded in docs.

4. Loading-State Blur

Apply blur(8px) to a low-resolution placeholder while the high-res image loads, then transition filter to none. The classic LQIP technique without a second image file.

Runs 100% in your browser

Your data never leaves your device. The preview applies the native CSS filterproperty to an <img> — no canvas rasterization, no upload — so an uploaded image is read locally with FileReader and cleared on refresh. I tested every slider against the Landscape and Portrait samples plus PNG and JPG uploads, confirmed the neutral-value omission produces clean strings (and none when nothing is set), and checked the Tailwind output compiles to the same render as the vanilla CSS.

Related CSS & design tools

Glassmorphism Generator

Frosted glass via backdrop-filter

CSS Gradient Generator

Build the background under a filtered image

Box Shadow Generator

The rectangular cousin of drop-shadow

Clip Path Generator

Mask image shape before filtering

Border Radius Generator

Round the corners of your filtered cards

CSS Beautifier

Format the rule before you commit it

CSS Minifier

Shrink the filter rule for production

CSS Specificity Calculator

Check which filter rule actually wins

Flexbox Generator

Lay out the gallery of filtered images

Grid Generator

Build the CSS grid behind the layout

Color Converter

Pick the hue you push toward with hue-rotate

Color Contrast Checker

Verify WCAG contrast over filtered images

Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.

Need a different tool?

Browse all 89 free, in-browser tools — or tell us what we should build next.

Browse all tools