Playground de Filtros CSS
Cor
Ajuste 9 funções de filtro CSS com sliders e veja a pré-visualização ao vivo (solte sua própria imagem ou use o bloco de gradiente integrado). Seis presets — Cool, Warm, P&B, Sépia, Vintage, Invertido — adiantam o caminho. A saída é uma regra CSS `filter` pronta para colar e uma classe de valor arbitrário Tailwind.
filter: none;
filter-none
Como usar
- Ajuste sliders ou clique em um preset para começar.
- Opcionalmente, solte uma imagem para pré-visualizar sobre conteúdo real.
- Copie a regra CSS ou a classe Tailwind.
Perguntas frequentes
- Por que blur em px pequeno mal aparece?
- O blur CSS usa raio gaussiano — acima de ~10px já se nota. O slider vai até 20px; blurs maiores raramente são úteis em UI.
- O que 'invert' faz nas cores?
- Substitui cada canal por 255 − valor. Útil em truques de modo escuro, mas inverte a imagem inteira incluindo fotos — geralmente você quer só em ícones ou texto.
- Por que sliders inalterados não aparecem na saída?
- A regra CSS filter só inclui funções que você de fato mudou (ex.: brightness(100%) é o default e é omitido).
- Classe Tailwind com valor arbitrário?
- O Tailwind tem atalhos prontos (blur-md, contrast-125) mas não todos os valores. A classe `filter-[…]` arbitrária permite usar qualquer filtro como utility — útil em prototipagem.
Ferramentas relacionadas
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Gerador de CSS Box Shadow
Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.