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

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.

Runs in your browserUpdated
Preview image

CSS


  

  


    
 Your data never leaves your computer. All processing happens 100% locally in your browser.

    
    
    

      
How to use the 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.
Also searched as: 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.
Tools that pair well with the 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.
  • 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.
  • Image Compressor — Shrink photos and graphics by 50–90% without visible quality loss.
Frequently asked questions
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.
Can I install CSS Filter Generator as a web app and use it offline?
Yes. CSS Filter Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.

      
    

    
Related 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…localImage CompressorShrink photos and graphics by 50–90% without visible quality loss. Batch-compress, convert to WebP or…