CSS Filter Generator

Build CSS image filters visually with sliders. Export the exact filter string for any image or element.

Presets

Blur0px

Brightness100%

Contrast100%

Saturate100%

Grayscale0%

Sepia0%

Invert0%

Opacity100%

Hue Rotate0deg

Original

Filtered

CSS Output

filter: blur(0px)
       brightness(1)
       contrast(1)
       saturate(1)
       grayscale(0)
       sepia(0)
       invert(0)
       opacity(1)
       hue-rotate(0deg);

About this tool

Build CSS filter effects visually - blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, and drop-shadow. Preview the filter applied to your own uploaded image or a built-in test image. Get the filter CSS property string instantly. Perfect for image styling, dark mode filters, and hover effects.

How to Apply CSS Filters to Images

1Upload your image or use the built-in test image.
2Adjust the filter sliders: blur, brightness, contrast, saturate, etc.
3Chain multiple filters by enabling several sliders at once.
4Preview updates in real time on the image.
5Copy the generated filter CSS property into your stylesheet.

Frequently Asked Questions

What CSS filters are available?+

blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), and drop-shadow(). Multiple filters can be chained in a single filter property: filter: grayscale(50%) brightness(120%).

How do I create a dark mode image filter?+

Use filter: invert(1) hue-rotate(180deg) to create a colour-inversion effect that works well for dark mode. For photos, filter: brightness(0.8) contrast(1.1) reduces glare without full inversion.

What is the difference between box-shadow and drop-shadow?+

box-shadow ignores transparency and applies to the rectangular box. drop-shadow() follows the actual shape of the element including transparent areas - essential for PNGs with transparent backgrounds.

Can CSS filters affect performance?+

Yes. blur() in particular is GPU-intensive. Animate filters on composited layers (using transform: translateZ(0)) to avoid layout repaints. Avoid animating blur on large elements on mobile.

Looking for a deeper guide on this topic? Browse the Searchlight blog.

Visit the blog →

Related tools

View all Generators →