Local CSS filter generator

Build a CSS filter with live preview

Tune blur, color, and opacity effects on a local sample, then copy one clean filter declaration.

* Everything runs in your browser. No images are uploaded.

Blur (px)Brightness (%)Contrast (%)Grayscale (%)Hue rotate (deg)Invert (%)Saturation (%)Sepia (%)Opacity (%)

CSS ready

filter: blur(4px) brightness(110%) contrast(120%) grayscale(20%) hue-rotate(12deg) invert(0%) saturate(140%) sepia(8%) opacity(95%);

FilterBox

QUICK GUIDE

Filter functions run in order

Each function changes the result produced by the functions before it.

Brightness and contrast start at 100%; color effects start at 0%.

Blur softens edges, while opacity controls how much of the sample shows through.

The preview uses CSS filter directly, so the copied declaration behaves the same in your page.

FAQ

Can I use this on any element?

The filter property applies graphical effects to images, text, backgrounds, borders, and other elements.

Why does order matter?

A filter list is applied from left to right. Changing the order can change the final color and contrast.

Why is the sample local?

A built-in shape keeps the tool private and fast. Paste the generated declaration onto your own image or component.