CSS Filter Generator

Create and preview CSS filter effects (blur, brightness, contrast, sepia, etc). Copy the filter CSS below.

Why use this CSS filter generator?

No backend, privacy-first—runs entirely in your browser
Real-time preview with before/after and custom image
Advanced filters plus drag-to-reorder filter order
Copy-ready CSS class, inline style, and Tailwind arbitrary value

Filters

Presets

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Sepia0%

Hue rotate0°

Invert0%

Opacity100%

Saturate100%

Drop shadow

Preview

Image source

Demo imageUploadURL

Show before / after

Output

.filtered {
  filter: none;
}

Filter value only:

none

Frequently Asked Questions

What CSS filters can I use?

You can combine blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, opacity, and saturate. Drop-shadow is also supported. The order in the generated CSS matches the order you adjust; combine them for effects like vintage (sepia + contrast) or fade (opacity + blur).

Why is my filter not showing?

filter: none means no effect is applied. Move at least one slider away from its default (e.g. blur > 0, or brightness ≠ 100) to see a change. For drop-shadow, enable the toggle and adjust the values.

Can I use these filters on text?

Yes. CSS filter applies to the whole element including text. For text-only effects like glow or shadow, consider the Shadow & Glow Text Generator tool for text-shadow.

Explore these related free tools to enhance your productivity and workflow.

Box Shadow Generator

Generate CSS box shadows with custom offsets, blur, spread, color, and opacity

CSS Clamp / Fluid Typography Calculator

Generate responsive clamp() values for font size and spacing

CSS Gradient Generator

Create beautiful linear and radial CSS gradients with custom colors, angles, and stops

Border Radius Generator

Create custom border radius values for all corners with individual or locked controls

Filters and controls