devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Audit du site

Cette page n’est pas encore traduite en français : elle s’affiche en anglais.

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.

Mis à jour le
Preview image

CSS


  

  


    
 Vos données ne quittent jamais votre ordinateur. Tout le traitement se fait localement dans votre navigateur.

    
    
    

      
Comment utiliser : 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.
Aussi recherché comme : 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.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer CSS Filter Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS Filter Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.

      
    

    
    
Outils similaires
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…localCompresseur d’imagesRéduisez la taille de vos photos et de vos graphiques de 50 à 90 % sans perte de qualité visible.…