Gerador de filtros CSS
Ajuste desfoque, brilho, contraste, cor e copie a propriedade filter ou backdrop-filter.
- Roda no seu navegador
Resultado
O resultado aparece aqui.
Valores neutros ficam de fora
| Filtro | Unidade | Valor neutro |
|---|---|---|
| blur | px | 0 |
| brightness, contrast, saturate, opacity | % | 100 |
| grayscale, invert, sepia | % | 0 |
| hue-rotate | graus | 0 |
Só entram na declaração os filtros que mudam a imagem. Com todos neutros o resultado é none. A ordem é fixa (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia) e a ordem importa em CSS.
Resultados de referência
| Escolhas | CSS gerado |
|---|---|
| desfoque de 4 | filter: blur(4px); |
| tons de cinza total e contraste 120 | filter: contrast(120%) grayscale(100%); |
| sépia 60 e saturação 130 | filter: saturate(130%) sepia(60%); |
| desfoque 10, brilho 90, fundo | backdrop-filter: blur(10px) brightness(90%); |
Marcando a opção de fundo, a propriedade vira backdrop-filter, que filtra o que está atrás do elemento. O efeito só aparece se o elemento for ao menos parcialmente transparente.
Perguntas frequentes
Como usar o css filter blur?
Informe o desfoque em px. Com 4 o resultado é: filter: blur(4px);
O que é o backdrop filter blur css?
É o desfoque aplicado ao que está atrás do elemento, em vez do próprio elemento. Marque a opção de fundo para gerar a propriedade backdrop-filter.