CSS filter: Blur, Brilho, Contraste e mais
Domine a propriedade CSS filter — blur, brightness, contrast, grayscale, hue-rotate e drop-shadow.
A propriedade CSS filter aplica efeitos gráficos a elementos. Ao contrário da edição de imagens no Photoshop, os filtros CSS são em tempo real e não destrutivos.
Os filtros são aplicados como uma lista de funções. A ordem importa: cada filtro é aplicado ao resultado do anterior.
O que é CSS filter
A propriedade CSS filter aceita uma lista de funções de filtro separadas por espaços. Os filtros se aplicam ao elemento e a todo o seu conteúdo incluindo filhos.
Ferramenta gratuita Gerador de Filtros CSS Crie efeitos de filtro CSS com pré-visualização ao vivoblur() e brightness()
blur(raio) aplica um desfoque gaussiano. brightness(quantidade) ajusta o brilho: brightness(1) inalterado, brightness(0) é preto.
contrast(), grayscale(), sepia()
contrast(quantidade) ajusta o contraste. grayscale(quantidade) remove a cor: grayscale(1) é totalmente em escala de cinza. sepia(quantidade) aplica um tom marrom quente.
Ferramenta gratuita Simulador de Daltonismo Veja como seus designs parecem para usuários com deficiências de visãohue-rotate() e saturate()
hue-rotate(ângulo) gira o matiz de todas as cores. saturate(quantidade) ajusta a intensidade da cor: saturate(0) é escala de cinza, saturate(2) é altamente saturado.
drop-shadow() vs box-shadow
drop-shadow() cria uma sombra que segue a forma do elemento, incluindo áreas transparentes em imagens. box-shadow segue apenas o retângulo delimitador do elemento.
Combinar múltiplos filtros
Múltiplos filtros são aplicados da esquerda para a direita. filter: brightness(1.2) contrast(1.1) saturate(1.3) cria uma imagem vibrante.
Ferramenta gratuita Gerador de Glassmorphism Crie efeitos de vidro fosco com backdrop-filter e blur