CSS Filter Generator

Drag sliders for blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. The preview updates as you go, and the output only lists the effects you actually changed. Copy the filter rule when it looks right.

Design

Drag the sliders to stack CSS filter effects on the preview. Only the effects you change show up in the output, and the CSS works on any element, not just images.

Gradient

Aa loot.toolsText

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue rotate0deg

Invert0%

Opacity100%

Saturate100%

Sepia0%

CSS

filter: none;

How it works

Each slider maps to one CSS filter function. Move blur to soften, push brightness or contrast above 100% to boost them, or drop them below to dim. Grayscale, sepia, and invert run from 0 to 100%, hue-rotate spins the colors around the wheel, and saturate controls how vivid things look. The preview shows the combined result on both a gradient and text, and the CSS output skips any effect left at its default so you ship a clean rule.

When you'd use this

Dimming a hero image so overlaid text stays readable
Building a grayscale or sepia hover state for thumbnails
Faking a frosted-glass look with blur and a brightness bump
Matching a brand color cast with hue-rotate and saturate
Previewing how a filter stacks before writing the CSS by hand

Filter order and stacking

CSS applies filter functions left to right, so the order can change the result - blur then brightness looks different from brightness then blur. This tool emits them in a consistent order and only includes the ones you've changed. The same filter property works on images, backgrounds, text, and any other element, which makes it handy well beyond photo effects.