# 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.

**URL:** https://convertto.tech/t/css-filter-generator
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [Blob Shape Generator](https://convertto.tech/t/blob-shape-generator): Design organic SVG backgrounds: four interpolation styles, gradients, layers and any canvas size.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Animation Generator](https://convertto.tech/t/css-animation-generator): Generate keyframe animations — fade, slide, bounce, pulse, spin and shake.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.