Skip to content
ToolQivo

CSS Filter Generator

Stack CSS filters on a real image and copy the declaration.

Developer Tools Reviews Free · no sign-up

Drop your own image to preview against — it stays on your machine

Each function works on the output of the one before it, so the order changes the result.

Preview

Filtered

Original

Quick Tool Overview

The CSS Filter Generator stacks every filter function on a real image with sliders, and lets you reorder them — because each function operates on the output of the last, so the order changes the result.

What it does
Builds a CSS filter declaration
You give it
Filter functions and their values
You get back
The filter CSS with a live preview
Best for
Image treatments, hover effects and theming
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the CSS Filter Generator

Every CSS filter function on a slider, applied live to a real image so you can judge the result rather than guessing at a number. Blur, brightness, contrast, grayscale, sepia, hue-rotate, invert, opacity, saturate and drop-shadow are all here.

Filter order matters, which is easy to miss. The functions are applied left to right, each operating on the output of the last, so grayscale then sepia gives a different result from sepia then grayscale. The generator lets you reorder them. drop-shadow is included because it is not the same as box-shadow: it follows the alpha channel of the content, so it traces the actual shape of a transparent PNG or an SVG rather than its bounding box.

Key features of the CSS Filter Generator

Reorderable

Each function operates on the previous one’s output, so grayscale then sepia differs from sepia then grayscale. The order is yours to set.

Your own image

Drop one in and the filters apply to it locally, which is the only way to judge a treatment.

drop-shadow included

Unlike box-shadow it follows the alpha channel, tracing the real shape of a transparent PNG or an SVG.

Every function covered

blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow.

Performance noted

Blur and drop-shadow sample many pixels each; the others are cheap. Which matters if you plan to animate one.

How to use the CSS Filter Generator

  1. 1

    Drag the sliders

    Each filter function has its own control, applied live.

  2. 2

    Reorder the filters

    Order changes the result, because each one operates on the last one's output.

  3. 3

    Try your own image

    Drop an image in to preview against the real thing.

  4. 4

    Copy the CSS

    The complete filter declaration, in the order you set.

Frequently asked questions

drop-shadow follows the alpha channel, so it traces the actual shape of a transparent PNG or an SVG. box-shadow always follows the rectangular box, however transparent the content is.

Reviews of the CSS Filter Generator

What people who use the CSS Filter Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the CSS Filter Generator. It takes half a minute and no account.

Write the first review

More developer tools