CSS Filter Generator
Apply CSS filters visually: blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert and opacity. Live preview, copy the CSS.
.filtered {
filter: blur(0px) brightness(100%) contrast(100%) saturate(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) invert(0%) opacity(100%);
}About the css filter generator
The filter property applies graphical effects to an element and everything inside it, images and text alike. Filters compose: listing several in one declaration applies them in order, which is how presets like vintage or dreamy are built from primitives.
Because filters run on the GPU and need no image editing, they are the cheapest way to normalise a set of mismatched images, dim a hero behind text, or build hover treatments that reveal colour on interaction.
How to use it
- 1Start from a preset, or move sliders individually.
- 2Combine filters rather than pushing one to an extreme. Vintage is sepia plus a contrast and brightness lift.
- 3Watch the order in the exported CSS. Filters apply left to right and the order changes the result.
- 4Copy the CSS and apply it to an image, a container, or a hover state.
Worth knowing
- filter affects children too. To dim a background image without dimming the text on top, filter the image element rather than the wrapper.
- Combine grayscale with a hover transition to colour for a common portfolio effect.
- backdrop-filter is the related property that filters what is behind an element instead of the element itself.
Questions
What is the difference between filter and backdrop-filter?
filter processes the element and its contents. backdrop-filter processes whatever is painted behind the element, leaving the element's own content untouched. Glassmorphism uses the second one.
Does filter order matter?
Yes. Filters are applied in the order written, so blur then brightness gives a different result from brightness then blur. The generator preserves the order shown.
Are CSS filters faster than editing the image?
For a handful of elements they are effectively free and save you shipping multiple versions of an asset. Applying heavy blur to many large images at once is where it starts to cost, since each one is a separate GPU pass.