CSS Filter Generator
Slide blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate and invert, preview on a sample, and copy the filter CSS. It runs in your browser.
This css filter generator combines every common filter function into one value using a row of sliders. Adjust blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate and invert, and watch a colourful sample change as you drag. Because the filter property applies to any element, this works as an image filter css tool for photos or a tint for plain boxes and icons. The output only lists the functions you actually changed, so the blur brightness css you copy stays clean. It is a practical css filter maker that keeps the preview and the code identical.
filter: brightness(105%) contrast(115%) saturate(130%);
How it works
- 1
Move the sliders
Adjust any of the eight filters. Values left at their defaults are skipped, so the output only carries what you changed.
- 2
Watch the sample
The preview shows a colourful sample so grayscale, sepia, hue-rotate and invert are easy to judge alongside blur and brightness.
- 3
Copy the filter
The filter declaration combines your functions in order. Copy it and apply it to an image or element.
Instant & 100% private — nothing is uploaded
Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.
Frequently asked questions
- How do I turn a photo black and white?
- Raise the grayscale slider to 100%. As an image filter css tool you can then nudge contrast and brightness for a punchier monochrome look, all previewed live.
- Can I combine several filters at once?
- Yes. The filter property takes a space-separated list, and this css filter maker chains them in a sensible order. Only sliders you move are included, so the value stays readable.
- What does hue-rotate do?
- It shifts every colour around the colour wheel by the degrees you set, so reds can become greens or blues without touching brightness. Combine it with saturate to recolour an image.
- Why is my filter value “none”?
- When every slider sits at its default, there is nothing to apply, so the blur brightness css collapses to filter: none. Move any slider and the real value appears.
- Does filter work on any element?
- Yes. It applies to images, backgrounds, icons and whole containers. The preview uses a bright sample so the effect is clear, but the copied value behaves the same anywhere.
More tools
More from the Hivly network
Free sister tools on our other sites.
