Open menu

CSS Filter & Backdrop-filter Generator

Edit images and elements with CSS filters and compare the result side by side with the original. Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturation, sepia and drop-shadow, or switch to backdrop-filter to blur and tint whatever sits behind a panel. Start from photo-style presets such as vivid, warm, cool, vintage, noir and dreamy, then export CSS, SCSS or Tailwind utilities.

Preset gallery
Original
Filtered

Accessibility checks

  • Pass These filters are light to render.
  • Pass Colors stay recognisable.

Export code

.filtered {
  filter: brightness(1.05) contrast(1.1) saturate(1.3);
}
Import CSS (copy from a site)

Paste CSS from your site or browser dev tools: a rule or just declarations. Supported properties are loaded into the controls; everything else is listed. You can undo the import.

Favourites on this device (0)

No favourites yet.

Apply to
Target
Filters
Drop shadow

How to use the filter generator

  1. Choose the target: the element itself (filter) or what sits behind it (backdrop-filter).
  2. Pick a preset or adjust the sliders: brightness, contrast, saturation, grayscale, sepia, hue, invert, opacity and blur.
  3. Add a drop shadow that follows the image’s shape.
  4. For backdrop mode, set a tint color and opacity for the glass.
  5. Compare the original and the filtered version side by side.
  6. Export CSS, SCSS or Tailwind (brightness-[1.05] contrast-[1.1] and so on).

How it works

.photo {
  filter: brightness(1.05) contrast(1.1) saturate(1.3);
}

Values of 1 (100%) mean “unchanged”. Above 1 increases the effect for brightness, contrast and saturation; below 1 reduces it. Grayscale, sepia and invert run from 0 to 1.

Worked examples

Example 1: consistent product photos

Load Vivid for a slight lift in brightness, contrast and saturation. Apply the same filter to every product image so photos from different sources look more consistent.

Example 2: a hover reveal

Use Noir on gallery images, then remove the filter on hover and focus with a short transition. The color “blooms in” when people show interest.

Example 3: a frosted header

Choose the backdrop target and load Frosted: a 16px blur with a 160% saturation boost and a light tint. Place it on a sticky header over a colorful hero.

Common mistakes

  • Filtering text. Blur and low contrast make text hard to read; filter images, not content.
  • Changing meaning. Hue shifts and inverting change status colors and charts, so keep filters for photos.
  • Forgetting the backdrop fallback. Without support, a translucent panel becomes unreadable; the export makes it nearly opaque instead.

Performance and accessibility

Filters are drawn by the graphics card and are usually fast, but blur() on large areas and filters on elements that animate every frame can be expensive on low-end phones. Test on a real device, and prefer animating opacity and transform where you can.

Filters change the colors people see. A grayscale or low-contrast filter on text can push it below WCAG contrast minimums, so recheck contrast after applying a filter to anything readable. Don’t use filters as the only way to show state, such as a greyed-out disabled button; add text or an icon too. For decorative images, filters are a lightweight alternative to editing the files themselves, and they’re easy to remove later.

Import CSS from your site

Already have a style you like? Open Import CSS (copy from a site), paste a rule or just its declarations from your stylesheet or your browser’s developer tools, and press Import into the controls. This tool reads filter or backdrop-filter functions (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow) and, for backdrop filters, the background tint. Everything else, and rules for states such as :hover or media queries, is listed as skipped, and the import can be undone in one step.

Frequently asked questions

What's the difference between filter and backdrop-filter?

filter changes the element itself, including its children. backdrop-filter changes what is visible behind the element, which is how frosted-glass panels are made; the element needs a semi-transparent background for the effect to show.

Why use drop-shadow instead of box-shadow?

box-shadow follows the element's rectangle. filter: drop-shadow() follows the visible shape, including transparent PNG and SVG edges, so it's the right choice for icons and cut-out images.

Does the order of filters matter?

Yes, filters are applied in sequence. Blurring before increasing contrast looks different from the reverse. The generator writes them in a consistent order.

Are CSS filters slow?

Simple color filters are cheap. Large blurs and drop-shadows on big areas cost more, especially while scrolling or animating. The checker warns when the blur is heavy.

Can filters be animated?

Yes. Transitions and animations work on filter, as long as both states use the same functions in the same order, for example from blur(0) to blur(8px).

Sources