Playground de filtros CSS
CSS Filter Playground
Empilha filtros de desfoque, brilho, saturação, matiz e drop-shadow numa amostra e gera o CSS.
Empilha as funções de filtro CSS sobre uma amostra e lhe dá a declaração. A prévia é renderizada pela própria propriedade `filter` do navegador, então o que você vê é, por definição, o que o CSS faz, e não uma aproximação. O extra aqui é o `feColorMatrix` equivalente: cada uma dessas funções, exceto blur e drop-shadow, é afim em RGBA, então uma cadeia de oito colapsa em vinte números.
Prévia
Quem desenha é a propriedade filter do próprio navegador, então isto é o que o CSS abaixo faz, não uma aproximação dele.
CSS
Filtros
Como usar
Escolha o que olhar
Amostras lisas mostram o que acontece com cores específicas, o degradê mostra o que acontece ao longo de uma faixa que inclui os cinzas, e a sua própria imagem mostra o que acontece com a coisa que você realmente está filtrando. Julgue pela última antes de publicar.
Mova as funções de que precisa
Qualquer coisa deixada no seu valor neutro é omitida por completo da saída, então o CSS fica tão curto quanto o que você realmente mudou. A ordem importa e segue a ordem da lista.
Adicione drop-shadow por último, se quiser uma
É um bloco separado porque recebe três números e uma cor em vez de uma única quantidade, e porque segue o canal alfa — contorna a forma de um PNG transparente, e não a caixa dele.
Pegue o CSS, ou pegue a matriz
O CSS é para uma folha de estilo. O `feColorMatrix` é para um filtro SVG, um shader ou qualquer pipeline em que rodar oito passadas para fazer o que uma multiplicação de matriz faz vale a pena evitar.
Perguntas frequentes
Por que blur está faltando na matriz?
Porque é espacial: um pixel desfocado depende dos vizinhos, e uma matriz de cor só olha um pixel de cada vez. O mesmo vale para drop-shadow. O painel nomeia as que não puderam colapsar e as deixa como um passo separado em vez de descartá-las em silêncio.
hue-rotate(180deg) não me deu a cor complementar.
Ele nunca dá. A função é uma rotação em torno do eixo de luminância do cubo RGB não linear, que a especificação define com uma matriz fixa — não é uma rotação perceptual de matiz e não foi projetada para ser. Para um complemento de verdade, gire o matiz em OKLCH com o conversor de cores ou o gerador de paleta.
grayscale(1) usa os coeficientes de luminância certos?
Usa os que a especificação exige: Rec. 709, aplicados a valores codificados em gama. Aplicar pesos de luminância a valores não lineares é, a rigor, errado — uma dessaturação correta lineariza primeiro. A especificação manda fazer assim e os navegadores fazem, então isto reproduz a discrepância em vez de corrigi-la, porque concordar com o navegador é o objetivo.
Isto cobre backdrop-filter?
As funções são as mesmas, então o valor que você copia é válido lá também. O que é diferente é a fonte — `backdrop-filter` filtra o que quer que esteja pintado atrás do elemento, não o elemento — então a prévia aqui não vai dizer como um painel fosco fica sobre o seu conteúdo real. Cole na página e olhe.
Pode receber de
Gerador de box-shadow
Box Shadow Generator
Compõe sombras de caixa e de texto em camadas com prévia ao vivo e gera o CSS.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Brilho e ajuste de cor
Brightness & Colour Adjust
Ajusta brilho, contraste, saturação, temperatura e nitidez com um histograma ao vivo.
Gerador de box-shadow
Box Shadow Generator
Compõe sombras de caixa e de texto em camadas com prévia ao vivo e gera o CSS.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.