Neatbo.

CSS filter generator

Combine CSS image filters with live before/after previews, then copy the generated rule.

Browser-local processingInputFilter controlsOutputCSS
  1. 1Add input
  2. 2Adjust settings
  3. 3Get your result

Tool input and files are processed in this browser without being uploaded.

Your input

Inputs are kept temporarily in this tab when switching tools. Refreshing or closing clears them; large results may need to be regenerated.

⌘ / Ctrl + Enter to run

Move a slider or enter a value. Multiple filters stay combined in the live preview; the source image is never changed.

Quick looks
Preview ready. Generate CSS when the effect looks right.

PNG, JPG or WebP up to 10 MB. This photo stays in your browser and is used only for the preview.

Original

With filter

Compare both views on the same image. Filters apply to the whole element, including its child content on your page.

Preparing the tool…

Before you start

Move sliders to tune brightness, contrast, saturation, grayscale, sepia and blur together. Compare the original with the filtered view on a sample or your own local image before copying the CSS.

How to use this tool

  1. Choose a quick look or tune each filter with sliders and numeric inputs.
  2. Compare before/after on the sample or choose your own local image for the preview.
  3. Generate, copy or download the CSS rule and test it on the final element.

Supported inputs and limits

Brightness and contrast 0–200%, saturation 0–300%, grayscale 0–100% (whole percentages); blur 0–20px with one decimal place. Sepia accepts whole percentages from 0–100%. Order is fixed: brightness, contrast, saturation, grayscale, sepia, blur.

Optional local PNG, JPG or WebP image up to 10 MB is used for preview only. The output is CSS, not an edited image.

Filter order and target content affect rendering. This tool does not calculate a filter to match a target HEX color.

Worked example

Example input

Example options
{"brightness":100,"contrast":100,"saturate":100,"grayscale":0,"blur":0,"sepia":0}
Example output
filter: none;
When something does not work
Correct an out-of-range value or choose a valid local preview image, then compare and generate the CSS again.
Frequently asked questions
Will the image be edited or uploaded?
No. An optional local image is decoded in this browser for preview only. The downloaded file contains CSS, not modified image pixels.
Do the filters stay combined as I move a slider?
Yes. Each slider updates the full filter chain live; changing one value retains the others.
Can this match a specific HEX color?
No. It is a manual image-effect builder, not an inverse color-matching solver.
Documentation & further reading
Color and CSS guide: contrast, gradients and responsive styles →Image and CSS checks: dimensions, color, contrast and layout →
Related tools