Question 1

Quais funções de filtro CSS estão disponíveis?

Accepted Answer

CSS filter suporta: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate e sepia. Você pode combinar múltiplos filtros em uma única propriedade filter e eles são aplicados na ordem listada.

Question 2

A propriedade CSS filter afeta o desempenho?

Accepted Answer

Os filtros CSS são acelerados por GPU nos navegadores modernos, mas blur intenso ou múltiplos filtros empilhados podem impactar o desempenho de renderização, especialmente em dispositivos móveis. Para animações, use will-change: filter para otimizar.

Question 3

Posso aplicar filtros CSS apenas ao fundo (não aos elementos filhos)?

Accepted Answer

Não, a propriedade filter se aplica ao elemento inteiro incluindo seus filhos. Para filtrar apenas o fundo, use backdrop-filter para efeito glassmorphism, ou isole o fundo em um pseudoelemento separado.

Question 4

Qual é a diferença entre filter: opacity() e a propriedade opacity?

Accepted Answer

Ambas controlam a transparência, mas filter: opacity() usa aceleração de hardware e pode ser combinada com outras funções filter. A propriedade opacity é mais simples e cria um novo contexto de empilhamento. Para opacidade isolada, a propriedade opacity é geralmente preferida.

Question 5

Filtros CSS podem ser usados em elementos SVG?

Accepted Answer

Sim. Os filtros CSS se aplicam a elementos SVG assim como a elementos HTML. Além disso, SVG tem seus próprios primitivos de filtro (feBlur, feColorMatrix, etc.) que oferecem controle mais fino do que os atalhos de filtro CSS.

Gerador de Filtros CSS

Filtros

Perguntas Frequentes

Comments & Feedback