CSS Filter Generator

Combine CSS filter functions (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow) on a sample or your own image.

Presets

Filter functions

Blurpx

Brightness%

Contrast%

Grayscale%

Hue rotationdeg

Invert%

Opacity%

Saturation%

Sepia%

Drop shadow

Add drop-shadow()

Image

Use your own image

Your image is displayed locally and never uploaded.

Preview

CSS code

filter: none;

Related Tools

View All

CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow Generator

What is CSS Filter Generator?

Applies the CSS filter property to an image in real time. Combine blur, brightness, contrast, grayscale, hue rotation, invert, opacity, saturation, sepia and drop-shadow, compare the result with the original, and copy the code. You can use the built-in sample picture or load your own image, which stays on your device.

How to use CSS Filter Generator

Pick a preset (Black & white, Vintage, Warm, Cool, Dramatic…) or start from None.
Move the sliders for each filter function.
Enable drop-shadow() and set its offsets, blur, colour and opacity if needed.
Click Use your own image to test with a local file.
Copy the CSS code.

Example

Input

blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)

Output

filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));

When to use CSS Filter Generator

Use it for image hover effects, consistent photo styling, dimmed backgrounds and shadows that follow transparent PNG/SVG shapes (drop-shadow). It does not modify the image file itself; for permanent edits use an image editor or the site's image tools. To affect what is behind an element instead of the element, use backdrop-filter (see the Glassmorphism Generator).

How CSS Filter Generator works

Only functions that differ from their neutral value are written (for example brightness is omitted at 100%), in a fixed order: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow. Order matters in CSS because each function is applied to the output of the previous one. With nothing changed the output is filter: none;. Your image is shown via a local object URL and never uploaded.