🎨

CSS Filter Generator

Create stunning visual effects with CSS filters

Preview

Preview

Quick Presets

CSS Output

filter: none;

Filter Controls

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0deg

Invert0%

Opacity100%

Saturate100%

Sepia0%

Drop Shadow

X

Y

Blur

Shadow Color

CSS Filter Functions

blur()

Applies Gaussian blur to the element

brightness()

Adjusts brightness (100% = original)

contrast()

Adjusts contrast (100% = original)

grayscale()

Converts to grayscale (0-100%)

hue-rotate()

Rotates colors around the color wheel

invert()

Inverts colors (0-100%)

opacity()

Sets transparency (0-100%)

saturate()

Adjusts color saturation

sepia()

Converts to sepia tone

drop-shadow()

Applies drop shadow effect