Carregando...

Filtros CSS

As animações escreveram uma linha do tempo. Os transforms moveram onde os pixels ficam. Os filtros mudam como esses pixels aparecem: blur suave atrás de uma modal, miniaturas em grayscale que ganham cor no hover, foto realçada com brightness e contrast — no mesmo lugar do fluxo.

O que faz filter

A propriedade filter aplica um ou mais efeitos de pós-processamento no resultado pintado do elemento (em geral com descendentes, como um grupo). Largura, altura e fluxo do documento ficam iguais; só muda o aspecto visual. filter: none (valor inicial) remove os efeitos.

Encadeie funções num único valor filter, separadas por espaço — espírito parecido com transforms, mas aqui as ferramentas são visuais, não espaciais: filter: brightness(1.1) contrast(1.05) saturate(1.2);

Funções filter de relance

📊 Funções filter CSS comuns

Função Papel típico
blur(radius) Suavizar bordas / efeito fosco (px ou comprimento similar)
brightness(%) Clarear ou escurecer (1 / 100% = inalterado)
contrast(%) Intensificar ou achatar a gama tonal
grayscale(%) Tirar cor (1 = cinza total)
saturate(%) Aumentar ou reduzir intensidade da cor
hue-rotate(angle) Rodar matizes na roda cromática
opacity(%) Esmaecer o resultado filtrado (relacionado com, mas distinto de, a propriedade opacity)
sepia(%) / invert(%) Tom vintage quente / inverter tons
drop-shadow(…) Sombra que segue a forma alpha (ícones, contornos de texto)
none Remover filtros

Percentagens e números simples costumam funcionar (grayscale(1) ≈ grayscale(100%)). Escolha um estilo no projeto e mantenha-o.

Cartões em grayscale que acordam no hover

Padrão clássico de galeria: muted por defeito, cor plena no hover. Uma transição curta em filter deixa a restauração intencional — movimento das lições anteriores, aspeto desta.

Miniatura grayscale que restaura cor no hover

css 
.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}

.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}

grayscale(0) é cor plena. Mantenha a transição em filter para mudanças pequenas; animar blur pesado em fotos grandes pode ser caro.

Blur suave para destaque

blur() suaviza o elemento. Use raio modesto em sobreposição ou camada de fundo — não no body inteiro — para o texto continuar legível.

Painel blur atrás da modal

css 
.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}

.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}

Desfocar um ancestral grande também desfoca o texto dentro. Prefira desfocar uma camada de fundo (ou use backdrop-filter abaixo) quando o primeiro plano deve ficar nítido.

Brightness e contrast para fotos

Fotos de produto e imagens hero muitas vezes precisam de um grade leve sem abrir editor de imagem.

Grade de foto com brightness e contrast

css 
.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}

.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}

Valores um pouco acima de 1 clareiam ou reforçam contraste; abaixo de 1 recuam. Ajustes pequenos parecem acabamento; saltos grandes parecem falsos.

Empilhar vários filtros

Uma declaração pode combinar tom, cor e suavidade. A ordem pode importar em pilhas complexas — escreva o visual pretendido da esquerda para a direita e confirme no browser.

Pilha saturate, hue-rotate e blur leve

css 
.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}

.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}

Comece com uma ou duas funções. Só acrescente quando o design precisar — cada filtro extra é mais trabalho de GPU em superfícies grandes.

drop-shadow() vs box-shadow

box-shadow segue a caixa de borda. drop-shadow() segue a silhueta alpha — ideal para PNGs transparentes e ícones em que a sombra deve abraçar o glifo, não um retângulo.

Sombra de ícone com drop-shadow filter

css 
.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}

.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}

drop-shadow() não suporta inset como box-shadow. Para elevação reentrante de cartão, mantenha box-shadow da lição Effects.

Backdrop filter — blur no que fica atrás

backdrop-filter afeta o conteúdo visível através de um elemento translúcido (vidro fosco). O elemento precisa de fundo semi-transparente; senão não há nada para amostrar.

Ideia de exemplo: background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); num cabeçalho fixo sobre um hero movimentado. Suporte amplo em browsers modernos; mantenha fundo sólido de fallback se o blur puder ser ignorado.

Opacidade no filtro vs propriedade opacity

filter: opacity(0.5) esmaece a pintura filtrada. A propriedade opacity esmaece o elemento e cria um grupo de composição que muitas vezes afeta empilhamento e filhos. Para «todo o controlo, incluindo filhos, esmaece junto», a propriedade opacity costuma ser mais clara. Use opacity() no filtro quando faz parte de uma pilha de filtros com blur ou grades de cor.

Experimente

  1. Coloque filter: grayscale(1) na imagem de um cartão; restaure com grayscale(0) no :hover e transition: filter 0.2s ease.
  2. Suavize uma camada de fundo com blur(8px); mantenha o texto em primeiro plano sem filtro.
  3. Faça grade numa foto com brightness(1.1) contrast(1.05); depois aproxime ambos de 1 até parecer natural.
  4. Empilhe saturate(1.4) hue-rotate(20deg) num sticker; remova uma função e compare.
  5. Sombreie um ícone PNG transparente com drop-shadow(...); compare com box-shadow numa caixa quadrada.
  6. Opcional: barra fosca com background translúcido + backdrop-filter: blur(12px).

Erros comuns

  • Aplicar blur() forte numa secção grande da página com texto legível
  • Esperar que drop-shadow() aceite inset como box-shadow
  • Usar filter: opacity() quando um opacity simples no elemento seria mais claro
  • Animar filtros pesados em imagens grandes em cada frame de scroll sem verificar desempenho
  • Definir backdrop-filter em fundo totalmente opaco — nada se vê atrás, logo não há efeito fosco

Resumo

  • filter muda o aspeto dos pixels pintados; o fluxo de layout fica no sítio
  • Encadeie blur, brightness, contrast, grayscale, saturate e afins num valor
  • Prefira drop-shadow() para sombras que seguem alpha; box-shadow para elevação de caixa
  • backdrop-filter fosca o que aparece atrás de uma camada translúcida
  • Effects & Motion fecha aqui; o módulo seguinte é Modern Toolkit — começando com variáveis CSS

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
6
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 62 de 63
Css Tutorial