Ir para o conteúdo
AZ Tools

Playground de Filtros CSS

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.

—
Pré-visualização
AZ Tools
CSS
filter: none;
Tailwind
filter-none

Como usar

  1. Ajuste sliders ou clique em um preset para começar.
  2. Opcionalmente, solte uma imagem para pré-visualizar sobre conteúdo real.
  3. 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

Desfoque de imagem

Aplica desfoque Gaussiano, caixa ou de movimento a qualquer imagem no seu navegador. Raio ajustável 0-64 px, com o filtro CSS equivalente pronto para copiar.

Imagem 0 0

Playground de CSS Flexbox

Escolha visualmente flex-direction, justify-content, align-items e gap — copie o CSS ou a classe Tailwind.

Desenvolvimento 0 0

Playground de CSS Grid

Escolha visualmente grid-template-columns / rows, gap e alinhamento — copie o CSS para o projeto.

Desenvolvimento 0 0

Efeito Duotone de Imagem

Aplique um efeito duotone de duas cores em qualquer imagem — escolha cor de sombra e cor de luz, ajuste midpoint e contraste, baixe o resultado. Capas estilo Spotify em dois cliques.

Imagem 0 0

Construtor de CSS clip-path (polígono, círculo)

Construtor visual da propriedade CSS `clip-path` — escolha uma forma (círculo, elipse, inset ou polígono), ajuste números com sliders ou clique na pré-visualização para adicionar pontos do polígono, e copie uma declaração CSS pronta para colar. Inclui 10 presets de forma (triângulo, hexágono, estrela, seta, balão, mais, …).

Cor 0 0

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor 0 0