Skip to content
Convertto

CSS Filter Generator — Blur, Brightness, Saturation & More

Build a CSS filter chain visually and see it applied to a real element as you adjust it.

CSS filters apply graphical effects to an element and everything inside it. Functions compose left to right, so the order changes the result — blur then invert is not the same image as invert then blur. Filters are GPU-accelerated in every current browser, which makes them far cheaper than the equivalent image processing.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

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

box-shadow follows the element's rectangle, including its border radius. filter: drop-shadow follows the actual painted shape, so a transparent PNG or an SVG icon casts a shadow around its outline rather than around its bounding box. That is the only way to shadow a non-rectangular graphic.

Why does a filter make my text blurry?

Applying any filter promotes the element to its own compositing layer, and some browsers rasterise that layer at the current zoom rather than at device resolution. It is most visible on text with a transform. Applying the filter to a wrapper rather than the text itself usually avoids it.

Does backdrop-filter work the same way?

It uses the same functions but applies them to whatever is behind the element rather than the element itself — that is how frosted-glass panels are built. It is more expensive to render and needs a translucent background to be visible at all.

How to use the css filter generator

  1. 1Select one or more filters to include.
  2. 2Set the blur.
  3. 3Set the brightness.
  4. 4Set the contrast.
  5. 5Set the grayscale.
  6. 6Set the hue rotate.
  7. 7Set the invert.
  8. 8Set the opacity.
  9. 9Set the saturate.
  10. 10Set the sepia.
  11. 11Turn "Coloured drop shadow" on or off as needed.
  12. 12The result appears immediately — copy or download it.

Embed this tool

Put the working css filter generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

Blob Shape GeneratorDesign organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Animation GeneratorGenerate keyframe animations — fade, slide, bounce, pulse, spin and shake.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.

Last updated

More css generators