My Tool Studio
CSS

CSS Filter Generator

This CSS filter generator combines blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia and opacity, plus an optional drop-shadow, into one filter line you tune with sliders. Try it on the built-in landscape or upload your own image; the file stays in your browser tab. Sixteen preset looks set several sliders at once, a split view compares before and after, and Download PNG saves the filtered image. A Backdrop filter mode previews the same functions behind a glass panel, and a Hex color to filter mode finds a filter chain that turns a black icon into any hex color. Copy CSS, Tailwind, SCSS or a JavaScript line. For example, the Noir preset gives grayscale(100%) with extra contrast, a common look for team photos.

Always freeNo sign upRuns in your browser

Presets

Sample landscape with the filter applied
Before and after split
Your image stays in this browser tab. Nothing is uploaded.
filter: none;
Blur0px
Brightness100%
Contrast100%
Grayscale0%
Hue rotate0deg
Invert0%
Saturate100%
Sepia0%
Opacity100%
Drop shadow

How to use

01

Pick a mode and an image

Choose Image filter, Backdrop filter or Hex color to filter. For the first two, use the sample landscape or click Upload your image; it is read locally and never uploaded.

02

Pick a preset or move sliders

Click a preset such as Vintage, Golden hour or Cyanotype, then fine-tune the nine sliders. Switch on Drop shadow for X, Y, blur and color, and Before and after split to compare.

03

Copy or download

Copy the CSS, Tailwind, SCSS or JavaScript tab, download the filtered image as a PNG, or copy a share link. In Hex color mode, type a color and copy the filter chain.

Why CSS Filter Generator

CSS filter functions, ranges and uses

Each slider maps to one filter function. The ranges are the ones in this tool; CSS allows larger values for most functions.

FunctionTool rangeDefaultTypical use
blur()0 to 20px0Softening backgrounds, privacy blur
brightness()0 to 200%100%Darkening a photo under text
contrast()0 to 200%100%Punchier or flatter images
grayscale()0 to 100%0Black and white, disabled states
hue-rotate()-180 to 180deg0Shifting all colors around the wheel
invert()0 to 100%0Quick dark versions of icons
saturate()0 to 300%100%Vivid or muted colors
sepia()0 to 100%0Warm, aged look
opacity()0 to 100%100%Fading inside the filter chain
drop-shadow()X, Y -40 to 40px; blur 0 to 40pxoffShadows that follow a transparent shape

Preset looks and the CSS behind them

Each preset starts from the defaults and changes a few sliders. The values below are what the tool writes for some of the 16 presets, so you can copy them directly or use them as a starting point.

Presets replace all current slider values, including any drop shadow, so pick a preset first and fine-tune afterwards. Results depend on the photo: the same Warm or Vintage values look stronger on pale images than on dark ones, which is why it helps to preview on your own image. To make a filter change on hover, put the preset value on :hover and add transition: filter 0.3s to the base rule.

Presetfilter value
Vintagebrightness(105%) contrast(110%) saturate(80%) sepia(50%)
Noirbrightness(90%) contrast(130%) grayscale(100%)
Warmbrightness(102%) saturate(130%) sepia(25%)
Fadedbrightness(110%) contrast(85%) saturate(70%)
Vividcontrast(110%) saturate(160%)
Dramaticbrightness(90%) contrast(140%) saturate(120%)
Golden hourbrightness(105%) hue-rotate(-10deg) saturate(140%) sepia(30%)
Moonlightbrightness(110%) contrast(110%) grayscale(100%)
Cyanotypegrayscale(100%) hue-rotate(170deg) saturate(250%) sepia(100%)
Soft blurblur(4px) brightness(95%)
Invertedinvert(100%)

Common questions

What order do CSS filter functions apply in?
Left to right, each one working on the result of the one before. Order matters for some pairs, such as drop-shadow and blur. The tool writes blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, opacity, then drop-shadow.
Can I preview CSS filters on my own image?
Yes. Click Upload your image and pick a file. It is shown with a local object URL, so it is not uploaded to a server. Click Back to sample to return to the built-in landscape.
How do I save a photo with the CSS filter applied?
Click Download PNG in Image filter mode. The tool draws your image on a canvas with the same filter and saves it, up to 4096 pixels on the longest side. This works in Chrome, Edge and Firefox; Safari does not apply CSS filters to a canvas yet, so the tool tells you when it cannot.
What is the difference between drop-shadow() and box-shadow?
box-shadow follows the element's rectangular box. drop-shadow() follows the visible pixels, so a transparent PNG or an SVG icon gets a shadow in its own shape. drop-shadow() has no spread value and cannot be inset.
How is filter different from backdrop-filter?
filter changes the element itself. backdrop-filter changes what is visible behind a semi-transparent element, which is how frosted glass panels work. Switch to Backdrop filter mode to preview the same functions behind a panel and copy the backdrop-filter lines with the -webkit- version.
How does the hex color to CSS filter mode work?
It searches for invert, sepia, saturate, hue-rotate, brightness and contrast values that turn black into your target color, using the filter math from the CSS spec. The match error shows how close it got; under 1 is near exact. Press Solve again for a different chain.
Why does the color filter start with brightness(0) saturate(100%)?
The solved chain assumes the element starts black. brightness(0) turns any icon black first, so the result is the same whatever its original color. If your icon is already black, switch the option off and the shorter chain is enough.
Can CSS filters apply to elements besides images?
Yes. filter works on any element, including text, buttons, video and whole sections, and it affects all of the element's children. The sample image just makes the effect easy to see.
Is filter: opacity() the same as the opacity property?
They look the same. opacity() inside filter is part of the filter chain, so it can be combined with the other functions in one line. The separate opacity property is more common for fades and transitions.
Does a heavy blur filter slow pages down?
It can. Blur has to sample many surrounding pixels, so large blurs on big or animated elements cost more to draw. For a blurred background photo, a pre-blurred image file is cheaper than a live blur.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Border Radius Generator

Round corners, per corner or as blobs

CSS