Gerador de filtros CSS
Combine funções CSS filter (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow) em uma imagem de exemplo ou na sua.
Predefinições
Funções de filtro
Sombra projetada
Imagem
Sua imagem é exibida localmente e nunca é enviada.
Pré-visualização
'/%3E%3Ccircle cx='300' cy='80' r='38' fill='%23ffd166'/%3E%3Cpath d='M0 200 L90 110 L160 180 L240 90 L400 210 L400 260 L0 260Z' fill='%232d6a4f'/%3E%3Cpath d='M0 230 L120 170 L220 220 L320 160 L400 200 L400 260 L0 260Z' fill='%2340916c'/%3E%3Crect x='40' y='200' width='60' height='40' fill='%23e63946'/%3E%3Cpath d='M35 200 L70 175 L105 200Z' fill='%236d2e46'/%3E%3Ccircle cx='160' cy='225' r='14' fill='%23ffffff' opacity='0.8'/%3E%3C/svg%3E)
filter: none;
Ferramentas Relacionadas
Ver TodasO que é Gerador de filtros CSS?
Aplica a propriedade CSS filter a uma imagem em tempo real. Combine desfoque, brilho, contraste, escala de cinza, rotação de matiz, inversão, opacidade, saturação, sépia e drop-shadow, compare o resultado com o original e copie o código. Você pode usar a imagem de exemplo incluída ou carregar a sua, que fica no seu dispositivo.
Como usar Gerador de filtros CSS
- Escolha uma predefinição (Preto e branco, Vintage, Quente, Frio, Dramático…) ou comece por Nenhum.
- Mova os controles deslizantes de cada função de filtro.
- Ative o drop-shadow() e defina seus deslocamentos, desfoque, cor e opacidade, se precisar.
- Clique na opção de usar sua própria imagem para testar com um arquivo local.
- Copie o código CSS.
Exemplo
blur 2px, brightness 120%, hue-rotate -90°, sepia 50%, drop-shadow on (4px 4px 6px, black at 0.5)
filter: blur(2px) brightness(120%) hue-rotate(-90deg) sepia(50%) drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
Quando usar Gerador de filtros CSS
Use-o para efeitos de hover em imagens, estilo consistente de fotos, fundos escurecidos e sombras que seguem formas PNG/SVG transparentes (drop-shadow). Ele não altera o arquivo da imagem; para edições permanentes, use um editor de imagens ou as ferramentas de imagem do site. Para afetar o que está atrás de um elemento em vez do próprio elemento, use backdrop-filter (veja o Gerador de glassmorphism).
Como funciona Gerador de filtros CSS
Só são escritas as funções que diferem do valor neutro (por exemplo, brightness é omitido em 100%), em uma ordem fixa: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow. A ordem importa no CSS, porque cada função é aplicada sobre a saída da anterior. Sem nenhuma alteração, a saída é filter: none;. Sua imagem é exibida por uma object URL local e nunca é enviada.
Casos de Uso Comuns
- Efeitos de hover de cinza para colorido em logos
- Estilos de foto vintage ou quentes em galerias
- Escurecer imagens de destaque sob o texto
- Sombras ao redor de ícones PNG transparentes com drop-shadow()
- Prévias rápidas no estilo daltonismo com hue-rotate
Nota de Segurança
As imagens que você carrega são exibidas apenas localmente no seu navegador e não são enviadas.
Perguntas Frequentes
Qual a diferença entre drop-shadow() e box-shadow?
O drop-shadow() segue os pixels visíveis do elemento (incluindo a transparência), enquanto o box-shadow sempre segue a caixa retangular.
Por que a ordem dos filtros importa?
Cada função processa o resultado da anterior, então, por exemplo, sépia depois de escala de cinza dá uma cor diferente de escala de cinza depois de sépia.
Minha imagem carregada é enviada para algum lugar?
Não. A imagem é exibida a partir de uma blob URL local no seu navegador.