Demo Image for Filter CSS Effects
This free CSS filter generator lets you apply visual effects to elements and images directly in your browser and watch the result update live. Drag sliders for grayscale, sepia, blur, brightness, hue-rotate, saturate, opacity, contrast, and invert, or add a drop-shadow with your own color and offsets. The CSS filter property applies graphical effects like blurring or color shifting to how an element is rendered, and you can chain multiple functions in a single declaration. When it looks right, copy the generated code and paste it into your stylesheet. Looking for cool fonts too? Try our Font Keyboard app on iOS and Android.

Frequently Asked Questions

What does the CSS filter property do?

The filter property applies graphical effects such as blur, brightness, contrast, grayscale, and color shifts to an element before it is rendered. You can list several filter functions in one declaration and they are applied in the order written.

How do I blur an element with CSS?

Use filter: blur(5px), where the length value sets the radius of the Gaussian blur. A larger value produces a stronger blur, and 0 (or omitting the function) leaves the element sharp.

How is filter: drop-shadow() different from box-shadow?

drop-shadow() follows the actual alpha shape of the content, including transparent PNGs and irregular edges, while box-shadow always draws a rectangle around the element's border box. Drop-shadow also does not support the inset or spread values that box-shadow has.

Which browsers support the CSS filter property?

The filter property is supported in all modern browsers, including Chrome, Edge, Firefox, and Safari. Older WebKit builds needed the -webkit-filter prefix, but the unprefixed property is now safe to use without it.