Skip to content

CSS Filter Generator

Adjust image filters with live preview, or get a suggested CSS filter for a target color.

Updated

What is the CSS Filter Generator?

CSS filters adjust the appearance of images and other elements in the browser. Use the sliders to change brightness, contrast, saturation, hue, blur, and more, then preview and copy the resulting CSS.

For a black icon, Match Color suggests a filter chain for a target color. Results can vary, so use the displayed loss score as a guide and fine-tune the values if needed. The tool can also generate backdrop-filter CSS and an optional -webkit- prefixed declaration. Photo presets provide approximations of familiar filter styles; they are starting points, not exact copies.

Changes are previewed in the browser. The generated CSS can be copied into a stylesheet and adjusted for your project.

How it works

The generator works in two modes that share the same live preview.

Manual Mode

  1. Upload an image or use the default gradient preview.
  2. Adjust sliders for each filter function: brightness (0–200%), contrast (0–200%), saturate (0–500%), grayscale, invert, sepia, opacity, hue-rotate (-180 to 180deg), blur (0–20px), and drop-shadow.
  3. Pick a preset to start from — it loads the full parameter set instantly.
  4. Toggle backdrop-filter for glass effects, and enable -webkit- for Safari support.
  5. Copy the generated CSS or the raw filter string.

Match Color Mode

  1. Enter a target HEX like #2563eb. The tool assumes a pure black source, which is standard for icon fonts and monochrome SVGs.
  2. Click Generate. The solver runs a two-stage SPSA optimization that tests thousands of combinations of invert, sepia, saturate, hue-rotate, brightness, and contrast.
  3. It returns the filter with the lowest loss score, plus the resulting RGB and HEX for verification. Loss under 5 is visually perfect.
  4. Fine-tune the result with sliders — the solver gives you the starting point, you keep creative control.

The filter string is built in the correct CSS order and omits defaults to keep code minimal. For non-black sources, prepend brightness(0) saturate(100%) to force black first, then add the generated filter.

Examples

1977 vintage photo filter

Apply a warm vintage look with boosted contrast and subtle sepia

Preset: 1977 → contrast 110%, brightness 110%, saturate 130%, sepia 30%
 
filter: contrast(110%) brightness(110%) saturate(130%) sepia(30%);

Convert black icon to brand blue

Get a suggested filter chain for recoloring a black SVG icon to #2563eb

Target hex: #2563eb
 
filter: invert(32%) sepia(89%) saturate(2064%) hue-rotate(212deg) brightness(96%) contrast(92%);

Frosted glass backdrop filter

Create glassmorphism effect for UI cards and navbars

blur 12px, brightness 110%, saturate 180%, mode: backdrop-filter
 
backdrop-filter: blur(12px) brightness(110%) saturate(180%);

Frequently asked questions

What does the CSS Filter Generator do?

It builds CSS filter and backdrop-filter declarations visually. You control brightness, contrast, saturate, hue-rotate, grayscale, invert, sepia, opacity, blur, and drop-shadow with sliders, see the effect live, and copy clean code. It also includes a color solver that converts any HEX color into the exact filter needed to recolor a black icon.

How is this different from other filter tools?

Most tools do only one thing: either sliders OR color matching. This combines both, adds backdrop-filter preview, 10 one-click presets, drop-shadow controls, webkit prefixing, and a real image upload — all client-side with no sign-up.

Can I really turn a black icon into any color with CSS?

Yes. CSS filters are applied in sequence, and a specific combination of invert, sepia, saturate, hue-rotate, brightness, and contrast can map black (0,0,0) to nearly any target color. The solver calculates that combination. For best accuracy, start with a pure black SVG or PNG with transparency.

Why does the color matcher sometimes need multiple clicks?

The solver uses random optimization. Each run explores a different path and returns the lowest-loss result. If loss is above 15, click Generate again — you’ll usually get under 5 within 2–3 tries, which is visually indistinguishable.

What is the correct order for filter functions?

Order matters. This tool outputs in the standard order: invert → sepia → saturate → hue-rotate → brightness → contrast → grayscale → blur → opacity → drop-shadow. Changing order changes the result, so keep this sequence for predictable output.

Does it work for backdrop-filter and glassmorphism?

Yes. Toggle the backdrop-filter switch to preview the effect behind an element instead of on it. Use blur with brightness and saturate for frosted glass. The code copies as backdrop-filter with optional -webkit-backdrop-filter.

Will the generated CSS work in all browsers?

filter is supported in all modern browsers. Safari still needs -webkit-filter for older versions, which the tool can include. Backdrop-filter requires the prefix in Safari. IE11 does not support CSS filters.

How do I use this for dark mode icons?

Upload your black icon set, enter your dark-mode accent HEX in Match Color mode, generate the filter, then apply it in your CSS: .icon-dark { filter: [generated string]; }. No need to maintain duplicate colored assets.

Related tools

More utilities you might find handy.

CSS

Box Model Visualizer

Interactive CSS box model visualizer with real-time editing of margin, border, padding, and content dimensions
CSS

CSS Animation Generator

Generate CSS keyframe animation code
CSS

CSS Border Radius Generator - Create Rounded Corners & Blob Shapes

Create rounded corners, pill shapes, and organic blobs with a live preview and copy-ready CSS or Tailwind classes.