Micro Tools
Advertisement

CSS filter generator

Build CSS filter effects with nine live sliders: blur, brightness, contrast, grayscale, hue, invert, opacity, saturate and sepia. Preview on the sample art, copy the code.

Filter sliders

Nine filters stack into one filter property.

Preview and CSS
Advertisement

How filters stack

The filter property applies functions left to right, and order changes the result: grayscale then sepia gives a warm vintage tone, sepia then grayscale just gives gray. Think of it as a pipeline where each stage feeds the next.

Recreating popular photo looks

Vintage: sepia 40 percent plus contrast 90 percent. Noir: grayscale 100 percent plus contrast 130 percent. Dreamy: brightness 110 percent plus saturate 130 percent plus a touch of blur. Start from these recipes, then tune by eye.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

CSS Filter Generator FAQs

Do CSS filters work on background images?
Yes, but filter applies to the whole element including its children. To filter only a background, put the image on a pseudo-element or a dedicated layer and filter that layer alone.
Are CSS filters GPU accelerated?
Mostly yes in modern browsers, which is why hover filter transitions stay smooth. Very large blurred areas can still cost performance on low-end phones, so test on real devices.
Can I animate between two filters?
Yes, filter is animatable: transition: filter 0.4s gives smooth cross-fades between states, which is how image galleries do elegant hover colorizations.
Why does hue-rotate change all my colors?
Hue-rotate spins every hue in the image around the color wheel by the given degrees. 180deg turns blues orange and reds cyan. It is the fastest way to recolor an entire illustration.
What is the difference between opacity filter and opacity property?
Visually almost none for a single element. The filter version participates in the filter pipeline and can be combined with other effects in one animatable property, which is convenient for hover states.
Advertisement