Home › Developer Tools › CSS Filter Generator

CSS Filter Generator

Move the sliders to style an image with CSS filters, drag the divider to compare with the original, and copy the filter declaration. Try it on your own photo: it never leaves your device.

Looks

FilteredOriginal

Before/after split Images stay on your device.

Generated CSS

Drop shadow

How to use the CSS Filter Generator

Pick an image: keep the sample or press Choose my image to load your own picture.
Start from a look such as Vintage or Noir, or go straight to the sliders.
Adjust the sliders for blur, brightness, contrast, hue and more; enable Drop shadow if you want one.
Drag the divider on the preview to compare the filtered and original image.
Copy the CSS and paste it into your stylesheet, or download the filtered image as a PNG.

CSS filter functions reference

Function	No change	Range and effect
`blur(5px)`	0	Gaussian blur radius in px or em. Larger values blur more; no negative values.
`brightness(120%)`	100%	0% is black; above 100% brightens.
`contrast(150%)`	100%	0% is flat gray; above 100% increases contrast.
`grayscale(100%)`	0%	100% removes all color.
`sepia(100%)`	0%	100% gives a full warm brown photo tone.
`hue-rotate(90deg)`	0deg	Rotates every color around the color wheel; 360deg is back to the start.
`saturate(200%)`	100%	0% is grayscale; above 100% makes colors more intense.
`invert(100%)`	0%	100% gives a photo negative; 50% is solid gray.
`opacity(50%)`	100%	Like the opacity property, but can be combined in the filter chain.
`drop-shadow(0 8px 16px rgba(0,0,0,.35))`	none	x offset, y offset, blur and color; follows the shape of the visible pixels.

Percentages can also be written as numbers: brightness(1.2) is the same as brightness(120%).

Practical uses

Hover effects: show logos in grayscale and restore color on hover with filter: grayscale(1) and transition: filter .3s.
Dimmed images behind text: brightness(60%) on a hero image improves the contrast of white headings.
Icon shadows: drop-shadow() on transparent PNG or SVG icons gives a shadow that hugs the shape, which box-shadow cannot do.
Frosted glass: use the same functions in backdrop-filter on a semi-transparent panel; see the Glassmorphism CSS Generator.
Need a permanent edit? To bake filters into the file itself, use Download PNG here or the Photo Filters tool.

Frequently asked questions

What does the CSS filter property do?

filter applies graphical effects such as blur, color shifts and shadows to an element and everything inside it while it is being painted. The element's layout does not change, and the original image file is untouched.

Does the order of filter functions matter?

Yes. Functions are applied one after another from left to right, so grayscale(1) sepia(1) gives a brown tint while sepia(1) grayscale(1) ends up plain gray. This generator writes them in a fixed, predictable order.

What is the difference between drop-shadow() and box-shadow?

box-shadow draws a shadow around the element's rectangular box. filter: drop-shadow() follows the actual visible pixels, so it hugs the outline of transparent PNGs, SVG icons and clip-path shapes. drop-shadow has no spread value and no inset option.

What is backdrop-filter?

backdrop-filter applies the same functions to whatever is behind an element instead of the element itself. With a semi-transparent background it creates the frosted glass look, for example backdrop-filter: blur(10px) saturate(160%).

Are CSS filters slow?

Simple color filters are cheap and usually GPU accelerated. Large blur radii and drop-shadows on big or animated elements cost more, so use them with care on long scrolling pages and on low-end phones.

Can I save the filtered image?

Yes. Download PNG redraws your image on a canvas with the same filter and saves it. This uses canvas filters, which work in Chrome, Edge and Firefox; in browsers without support the button explains that only the CSS can be copied.

Related tools