🎭

CSS Filter Effects Generator

Apply stunning visual effects to images and elements with CSS filters. Includes blur, brightness, contrast, saturation, and more.

Filter Settings

Filter Presets
Select a filter effect preset to apply predefined visual effects, or reset all filters to default values

Basic Filters

0px10px20px
Adjust the blur amount from 0 to 20 pixels
0%150%300%
Adjust the brightness from 0% (black) to 300% (very bright)
0%150%300%
Adjust the contrast from 0% (gray) to 300% (high contrast)
0%150%300%
Adjust color saturation from 0% (desaturated) to 300% (highly saturated)

Color Effects

0%50%100%
Convert image to grayscale from 0% (full color) to 100% (black and white)
0%50%100%
Apply sepia tone effect from 0% (no effect) to 100% (full sepia)
-180°0°180°
Rotate hue colors around the color wheel from -180 to 180 degrees
0%50%100%
Invert colors from 0% (normal) to 100% (completely inverted)

Opacity

0%50%100%
Adjust transparency from 0% (invisible) to 100% (fully opaque)

Drop Shadow

Enable drop shadow filter to add shadow effects to the element

Visual Preview

Original

Sample Image

With Filters

Sample Image
Live preview of filter effects
Filter effects updated: Blur 0px, Brightness 100%, Contrast 100%, Saturation 100%

Generated CSS

Complete CSS Code:
.filtered-element {
  filter: none;
  -webkit-filter: none;
}

Filter Value

Use this value for the filter property
none

Filter Summary

Basic
Blur: 0px, Brightness: 100%
Contrast
Contrast: 100%, Saturate: 100%
Color
Hue: 0°, Sepia: 0%
Effects
Grayscale: 0%, Invert: 0%