Can I combine multiple filters?

Yes, all filter functions are combined into a single filter declaration.

Does this affect performance?

Some filters like blur can be GPU-intensive on large elements; test on target devices.

Can I apply this to images specifically?

Yes, the same filter property works on img elements and any other HTML element.

CSS Filter Playground

Tune blur, brightness, contrast, and more with a live preview.

Works Offline

Privacy First

No Login

No API

Filters

Blur (0px)

Brightness (100%)

Contrast (100%)

Grayscale (0%)

Hue rotate (0deg)

Invert (0%)

Saturate (100%)

Sepia (0%)

Opacity (100%)

Preview

Generated CSS

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

About the CSS Filter Playground

Experiment with all standard CSS filter functions — blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, and opacity — combined into a single filter value. Preview live and copy the generated CSS.

Examples

Grayscale + blur

grayscale 100 / blur 4

Output

filter: blur(4px) grayscale(100%);

Related tools

Border Radius Generator

HTML & CSS

Fine-tune per-corner border radii visually.

Box Shadow Generator

HTML & CSS

Layer multiple box-shadows with a live preview.

Clip Path Generator

HTML & CSS

Design polygon clip-path shapes with a live preview.

CSS Animation Generator

HTML & CSS

Build keyframe animations visually with a live preview.

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Formatter

HTML & CSS

Beautify or minify CSS with safe string handling.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-07 · Runs entirely in your browser