CSS Filter Generator

Generate CSS filters to change SVG and image colors. Includes glassmorphism and 20+ presets.

Target Color

Generates CSS filters to transform black elements to this color

ΔE 153.6

Generated Filter

filter: invert(100%) sepia(108%) saturate(1011%) hue-rotate(191deg) brightness(117%) contrast(116%);
invert:100%
sepia:108%
saturate:1011%
hueRotate:191deg
brightness:117%
contrast:116%

Preview

Original (Black)

With Filter

★
●
▲
♦
♥
vs
Target
Result

UI Mockup with filter applied

★◆●
☰
▶

CSS Code

.element {
  filter: invert(100%) sepia(108%) saturate(1011%) hue-rotate(191deg) brightness(117%) contrast(116%);
}

.icon {
  filter: invert(100%) sepia(108%) saturate(1011%) hue-rotate(191deg) brightness(117%) contrast(116%);
}

.element:hover {
  filter: invert(100%) sepia(108%) saturate(1011%) hue-rotate(191deg) brightness(117%) contrast(116%) brightness(120%);
  transition: filter 0.3s ease;
}

Preset Filters

Click to copy · Basic · Photo · Creative

Backdrop Filter (Glassmorphism)

backdrop-filter applies effects to the area behind an element, creating glass-like effects.

Glassmorphism

backdrop-filter: blur(12px)

.glass-card {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

💡 Tips

  • CSS filters work best with black (#000) source elements
  • Useful for coloring SVG icons without modifying the file
  • Filter order matters: invert → sepia → saturate → hue-rotate → brightness → contrast
  • Use backdrop-filter for glassmorphism effects on backgrounds
  • Click "Re-solve" (↻) if accuracy is low — each run may find a better solution
  • Filters are GPU-accelerated but avoid excessive use on mobile

🌐 Browser Support

filter:✓ All modern browsers
backdrop-filter:✓ Chrome, Safari, Edge, Firefox 103+

How it works

CSS filters (filter) are functions that visually transform an element's appearance without modifying its content. They're essential for coloring SVG icons, creating photographic effects, and building glassmorphism interfaces.

CSS Filter Pipeline

Filters are applied sequentially. Each function transforms the output of the previous one:

invert() → sepia() → saturate() → hue-rotate() → brightness() → contrast()

Changing the order produces completely different results. Our multi-restart hill-climbing algorithm with coarse + fine pass optimizes this chain automatically.

filter vs backdrop-filter

filter

Transforms the element and its children. Ideal for icons, images, and shapes.

.icon { filter: hue-rotate(90deg); }

backdrop-filter

Transforms the area behind the element. Creates glass-like effects (glassmorphism).

.glass { backdrop-filter: blur(12px); }

When to use CSS filters?

  • External SVG icons — Recolor without editing the SVG file
  • Hover states — Gray-to-primary color transitions
  • Dynamic theming — Use CSS variables with generated filters
  • Photo effects — Vintage, noir, faded without canvas
  • Glassmorphism — Blur + saturate on translucent backgrounds

💡 Practical Use Cases

Case 1: Recolor library SVG icons

You have Font Awesome or Heroicons icons in black and need them to match your brand.

.brand-icon { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(213deg) brightness(96%) contrast(101%); } .brand-icon:hover { filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(213deg) brightness(120%) contrast(101%); transition: filter 0.3s ease; }

Case 2: Dynamic theming with CSS custom properties

Switch all icons based on the active theme.

:root { --icon-filter: invert(39%) sepia(80%) saturate(500%) hue-rotate(140deg) brightness(95%); } [data-theme="dark"] { --icon-filter: invert(90%) sepia(10%) brightness(120%); } .icon { filter: var(--icon-filter); }

Case 3: Glassmorphism with backdrop-filter

Create glass-effect cards over colorful backgrounds.

.glass-card { backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; }

Performance & Best Practices

  • CSS filters are GPU-accelerated — generally very fast
  • Avoid applying blur() with high values on many elements simultaneously
  • Use will-change: filter to optimize filter animations
  • backdrop-filter requires -webkit- prefix for Safari

Frequently Asked Questions

Does the filter work with any image?
The color → filter conversion works best with monochromatic (black/white) images. For color images, the photographic style presets (vintage, noir, etc.) are more appropriate. The algorithm starts from black (#000) as its base, so darker source elements produce the most accurate results.
Do CSS filters affect performance?
CSS filters are GPU-accelerated and generally very efficient. However, blur() with high values and many simultaneously filtered elements can cause FPS drops on mobile devices. Use will-change: filter to optimize animations.
What does the ΔE accuracy value mean?
ΔE (Delta E) measures the perceptual difference between the target color and the filter result. ΔE < 5 is excellent (visually identical), ΔE 5-15 is acceptable, and ΔE > 15 has a noticeable difference. You can click "Re-solve" to attempt a better result.
What is the difference between filter and backdrop-filter?
filter transforms the element and its content (ideal for icons/images). backdrop-filter transforms the area behind the element (ideal for glassmorphism). Both accept the same functions (blur, saturate, etc.) but apply in opposite directions.
Why is there an "Auto" and "Manual" mode?
Auto mode automatically calculates the filters needed to transform black into your chosen color — perfect for recoloring SVG icons. Manual mode gives you direct control over each individual filter — ideal for experimenting with photographic effects and creative adjustments.
Can I animate transitions between filters?
Yes. CSS allows smooth transitions between filter values using transition: filter 0.3s ease. This is perfect for hover effects. For complex animations, use @keyframes combining different filter values at each keyframe.