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

Esta página ainda não foi traduzida para o português, por isso aparece em inglês.

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.

Atualizado em
Preview image

CSS


  

  


    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
    
    

      
Como usar: 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.
Também pesquisado como: 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.
Ferramentas que combinam com: 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.
Perguntas frequentes
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.
Posso instalar o CSS Filter Generator como um aplicativo da web e usá-lo offline?
Sim. O CSS Filter Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
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…localCompressor de imagensReduz o tamanho das fotos e dos gráficos em 50–90% sem perda visível de qualidade. Comprime em lote,…