EnglishEN

CSS Filter Generator

Move the sliders and both the preview and the filter code update together.

Your text and files never leave your browser — nothing is sent to a server.

Drop a file here or click to choose
CSS code

How to use

  1. A sample picture is loaded. To use your own image, drop it into the box below.
  2. Move a slider or choose a preset and the effect applies right away. Settings left at their defaults are omitted from the code.
  3. Press and hold “Hold to see original” to compare with the unfiltered image.
  4. Copy the CSS code, or in supported browsers press “Download” to save a PNG with the filter applied.

FAQ

Does the order of filter functions matter?

Yes. Filters are applied from left to right, so changing the order changes the result. This tool always writes them in the same order.

How is drop-shadow different from box-shadow?

box-shadow draws a shadow around the element’s rectangular box, while drop-shadow follows the actual visible shape and skips transparent areas. It is ideal for transparent PNGs and icons.

Why is there no Download button?

It is hidden in browsers that don’t support canvas filters, such as some versions of Safari. You can still copy and use the CSS code.

Related tools

CSS GradientLinear, radial and conic gradientsBlack & White PhotoGrayscale, sepia and invertImage ConverterConvert JPG, PNG and WebPASCII Art GeneratorText and photos as character art

All tools