What is the difference between filter and backdrop-filter?

filter applies the effects to the element itself — its own pixels are blurred, recoloured, or shadowed. backdrop-filter instead applies the effects to whatever is rendered behind the element, which is how the frosted-glass (glassmorphism) look is achieved: a semi-transparent card blurs the content showing through it. The preview switches to a glass-card-over-a-scene layout when you select backdrop-filter.

Which filter functions are available?

Eight functions, each with its own slider: blur (px), brightness, contrast, and saturate (%), grayscale, sepia, and invert (%), and hue-rotate (degrees). In filter mode you can additionally enable a drop-shadow with X/Y offset, blur, and colour. Functions that are away from their neutral value are highlighted so you can see which ones are contributing.

Does the export include vendor prefixes?

Yes for backdrop-filter — the CSS and SCSS output include the -webkit-backdrop-filter prefix that Safari requires, alongside the standard property. The Tailwind exports use native utilities (blur-*, backdrop-saturate-*, and so on) where the prefixing is handled for you.

How do the Tailwind v3 and v4 exports differ?

Both emit arbitrary-value utility classes for precision. The key difference is that Tailwind v3 requires the enabling filter or backdrop-filter class to be present for the effect utilities to take effect, so the v3 export includes it; Tailwind v4 no longer needs that enabling class, so its export omits it.

Why does drop-shadow only appear in filter mode?

drop-shadow() is a filter function that shadows the element’s rendered (alpha) shape, which only makes sense applied to the element itself. backdrop-filter operates on the content behind the element, where a drop-shadow has no meaning, so the drop-shadow controls are hidden in backdrop-filter mode.

CSS Filter Generator

Build CSS filter and backdrop-filter (glassmorphism) effects with live sliders — blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, and drop-shadow. Export CSS, SCSS, Tailwind v4/v3, or JS.

About this ToolHow it works, benefits & use cases

Tune CSS filter and backdrop-filter effects with live sliders and an instant preview. Switch between two modes: filter recolours and blurs the element itself, while backdrop-filter frosts whatever sits behind it for the glassmorphism look. Eight filter functions — blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, and invert — each get a slider, and labels highlight which functions are active (away from their identity value). In filter mode you can also add a drop-shadow with X/Y offset, blur, and a colour picker. The preview adapts to the mode: filter mode renders your effect on a photo gradient, sunset, text, or star icon, while backdrop-filter mode floats a frosted glass card over a vivid scene with shapes behind it so the blur is obvious. Presets are filtered to the current mode, and a live code readout shows the exact value. Export to CSS (with the -webkit- prefix for Safari), SCSS, Tailwind v4, Tailwind v3 (which adds the enabling filter class v4 no longer needs), or a JS inline style. The whole effect is saved in a shareable URL.

How to Use

1Choose a mode: filter to affect the element, or backdrop-filter for a frosted-glass effect behind it.
2Apply a preset (the list shows only presets for the current mode), or build your own.
3Drag the filter-function sliders — blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert.
4In filter mode, enable Drop shadow and set its offset X/Y, blur, and colour if you want one.
5Switch the preview target (photo, sunset, text, icon) to judge the effect, and use Reset to clear values.
6Pick an output format and copy, download, share, or pipe the generated value.

Key Benefits

Two modes in one tool: filter for the element, backdrop-filter for glassmorphism
Eight filter functions on live sliders with active-state labelling
Optional drop-shadow with offset, blur, and colour picker (filter mode)
Mode-aware preview — frosted glass card over a scene for backdrop-filter
Presets scoped to the current mode for relevant starting points
Exports include the -webkit- prefix for Safari and a Tailwind v3 enabler class
Live code readout and a shareable URL, generated entirely in the browser

Common Use Cases

Building a frosted-glass (glassmorphism) navbar or modal with backdrop-filter
Desaturating or dimming background images for better text contrast
Creating duotone and vintage photo treatments with sepia, hue-rotate, and contrast
Adding a drop-shadow that follows a transparent PNG’s shape rather than its box
Generating Safari-safe filter CSS or matching Tailwind utility classes

Preview

filter: brightness(102%) contrast(110%) saturate(140%);

Mode

Presets

Filter functions

Blur0px

Brightness102%

Contrast110%

Saturate140%

Grayscale0%

Sepia0%

Hue rotate0°

Invert0%

Drop shadow

Output format

CSS output

Copy, download, share, or pipe to another tool

.element {
  filter: brightness(102%) contrast(110%) saturate(140%);
}

Filters & frosted glass

filter recolours and blurs the element itself; backdrop-filter frosts whatever sits behind it — the glassmorphism look. Tailwind exports use native utilities (blur-*, backdrop-saturate-*…); the v3 output adds the enabling filter / backdrop-filter class that v4 no longer needs, and the CSS output ships the -webkit- prefix for Safari.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

CSS Filter Generator

How to Use

Key Benefits

Common Use Cases

Mode

Presets

Filter functions

Filters & frosted glass

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - CSS Filter Generator