devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Website-Check

Diese Seite ist noch nicht auf Deutsch verfügbar, daher zeigen wir die englische Version.

CSS Filter Generator — Image Effects & Color to Filter

Adjust blur, brightness, contrast, saturation, hue, grayscale, sepia, invert and drop shadow on a sample or your own image and copy the filter CSS. Need an SVG or PNG icon in a brand color? Color to filter turns any hex color into a filter that recolors black icons.

Aktualisiert am
Preview image

CSS


  

  


    
 Deine Daten verlassen nie deinen Computer. Die Verarbeitung erfolgt zu 100 % lokal im Browser.

    
    
    

      
So nutzt du: CSS Filter Generator
  1. Image effects: drag the sliders (or pick a preset) and watch the preview. Click Use my image to try it on your own photo — it stays on your device.
  2. Hex color to filter: enter a color like #4f46e5. The tool finds a filter that turns a black icon into that color.
  3. Copy the CSS and apply it to an <img>, an SVG or any element.


CSS filter functions


FunctionEffectDefault


blur(4px)Gaussian blur0


brightness(120%), contrast(110%)lighter/darker, more/less contrast100%


saturate(150%), grayscale(100%)more/less color100%, 0


hue-rotate(90deg)shift all colors around the color wheel0deg


sepia(60%), invert(100%)warm brown tone, negative0


drop-shadow(0 8px 12px #0006)a shadow that follows the image’s transparencynone




Filters run in order, left to right, so grayscale(100%) sepia(60%) is not the same as the reverse.


Recoloring icons with a filter
You can’t set color on an <img src="icon.svg">, but you can filter it. Starting from black, a chain like invert() sepia() saturate() hue-rotate() brightness() contrast() can reach almost any color; this tool searches for the values with the smallest visible difference. If you control the SVG, fill="currentColor" is simpler — the SVG optimizer can do that for you.
Auch gesucht als: hex to css filter, color to filter, css filter color, change svg color css filter, css image filter, filter brightness contrast, css grayscale, black to color css filter.
Passende Tools zu: CSS Filter Generator
  • Color Converter — Paste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
  • Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
  • Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
  • CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
Häufige Fragen
How do I change the color of an SVG or PNG icon with CSS?
If the icon is black, use Hex color to filter: enter your color and apply the generated filter to the img. For inline SVGs, set fill="currentColor" and use the CSS color property instead.
Why is the filter color not exact?
Filters can only approximate some colors. The tool reports the difference; run the search again for a closer match — results marked “Perfect” are indistinguishable by eye.
Do CSS filters work on any element?
Yes — images, videos, SVG, text and whole sections. Note that filters create a new stacking context and can affect performance on very large areas.
What is the difference between box-shadow and drop-shadow?
box-shadow follows the element’s rectangle; filter: drop-shadow follows the visible pixels, so it hugs transparent PNG and SVG shapes.
Kann ich CSS Filter Generator als Web-App installieren und offline nutzen?
Ja. CSS Filter Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.

      
    

    
    
Ähnliche Tools
localColor ConverterPaste any CSS color — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format…localBorder Radius GeneratorRound the corners of any box: drag one slider for all corners or set each corner separately, switch to…localBox Shadow GeneratorStack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the…localSVG OptimizerClean up SVGs exported from Figma, Illustrator, Inkscape or Sketch with SVGO — and check the before/after…localCSS Gradient GeneratorDesign a gradient visually — drag color stops, change the angle or type, start from a preset — and copy…localBildkompressorVerkleinere Fotos und Grafiken um 50–90 % ohne sichtbaren Qualitätsverlust. Komprimiere mehrere Dateien…