Opacidade e Transparência RGBA

A propriedade opacity define a transparência do elemento inteiro, incluindo seus elementos filhos e conteúdo. Os valores variam de 0 (totalmente transparente) a 1 (totalmente opaco).

Uma ressalva importante: opacity afeta toda a árvore de elementos. Textos, imagens e elementos filhos dentro de um elemento com opacity: 0.5 ficam todos 50% transparentes — não é possível tornar os filhos mais opacos que o elemento pai.

Para tornar transparente apenas a cor de fundo, sem afetar o texto nem os elementos filhos, use rgba() em vez de opacity:

Use este modelo mental:

• opacity: 0.5 — o elemento inteiro e seus filhos ficam transparentes
• rgba(r,g,b,0.5) — somente o valor da cor fica transparente; os filhos não são afetados

O mesmo princípio se aplica a hsla(). O quarto argumento é o canal alfa (0–1):

O CSS moderno permite usar uma barra como separador do alfa em rgb() e hsl(), sem a variante "a":

As três opções ocultam os elementos, mas de maneiras diferentes:

• opacity: 0 — fica invisível, mas ainda ocupa espaço e pode ser clicado
• visibility: hidden — fica invisível, ocupa espaço, mas não pode ser clicado
• display: none — é removido completamente do layout

Como opacity é processada pela composição da GPU, ela é uma das propriedades CSS mais baratas para animar. Os efeitos de aparecimento e desaparecimento gradual devem sempre usar transições de opacity, em vez de background-color.

Para dar a um elemento um fundo translúcido e manter o texto totalmente legível, use rgba() em background-color:

Use RGBA em border-color e box-shadow para criar efeitos sutis e transparentes:

Textos com baixa opacidade reduzem a legibilidade e podem não atender aos requisitos de contraste de cores da WCAG. Sempre verifique as taxas de contraste ao usar transparência no texto. Garanta uma taxa mínima de 4,5:1 para textos comuns.

Um elemento tem opacity: 0.3. O que acontece com o texto dentro dele?

opacity torna transparentes o elemento inteiro e seus filhos. Use rgba() ou hsla() para criar cores transparentes sem afetar os filhos. As transições de opacity são aceleradas pela GPU e têm bom desempenho. Sempre verifique as taxas de contraste ao usar transparência no texto.