a11y.skipToMainContent
1

Gerador de Filtro CSS

Disque nos filtros de imagem CSS visualmente e copie a propriedade do filtro — visualização em uma amostra ou em sua própria imagem.

Presets

Filters

px
%
%
%
deg
%
%
%
%

Preview subject

Preview

🌈

CSS

Was this tool helpful?
Send Image to:
Advertisement

How to use CSS Filter Generator

  1. Arraste os controles deslizantes para borrar, brilho, contraste e as outras funções de filtro para construir seu efeito.
  2. Opcionalmente, habilite o drop-shadow e defina seu deslocamento, borrão e cor.
  3. Clique em 'Use exemplo' ou faça upload de sua própria imagem para visualizar o filtro no conteúdo real.
  4. Clique em Copiar CSS para pegar a propriedade de filtro gerada.

O que é {nome}?

O CSS Filter Generator permite empilhar efeitos gráficos em qualquer elemento usando a propriedade filter. Arraste os controles deslizantes para desfocar, brilho, contraste, escala de cinza, matiz-rota, inverter, opacidade, saturar e sepia, então, opcionalmente, adicione um drop-shadow() com seu próprio offset, borrão e cor.

Cada alteração atualiza a visualização ao vivo instantaneamente. Teste na amostra colorida incorporada, ou faça upload de sua própria imagem para ver exatamente como o filtro fica no conteúdo real antes de enviá-lo. A imagem permanece no seu dispositivo — nada é enviado para um servidor.

Comece a partir de uma predefinição, como vintage, B&W, quente, frio, dramático ou foco de borrão para chegar perto rápido, em seguida, fino-tune. Quando parecer certo, copie a declaração de uma linha filter diretamente em sua folha de estilo.

Advertisement

FAQ

O que faz a propriedade de filtro CSS?
filtro aplica efeitos gráficos como borrão, brilho, contraste, escala de cinza, matiz-rotate e gota-sombra para um elemento antes de ser renderizado. Você pode combinar várias funções em uma declaração, e elas se aplicam na ordem que você as lista.
A minha imagem enviada foi enviada para algum lado?
Não. A imagem é carregada com um URL de objeto local puramente para visualização e nunca sai do seu navegador. Toda a ferramenta executa o lado do cliente, então seus arquivos permanecem privados em seu dispositivo.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Filter Generator on Wikipedia·Developer Tools on Wikipedia·CSS Filter Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement