CSS Filter Generator

v1.0.2

Build CSS filter effects — blur, brightness, contrast, grayscale, hue-rotate, and more — with live preview and copy-ready CSS.

Builds CSS filter declarations — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia — with live preview on a test image and copy-ready CSS.

How to use

→Adjust the sliders for each filter property; they compound in real time.
→Preview on the default image or upload your own.
→Copy the filter: value and apply it to any img or element in your CSS.

Controls

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0deg

Invert0%

Saturate100%

Sepia0%

Opacity100%

CSS

.element {
  filter: none;
}