Propriedade de Opacidade
Última atualização: 2026-09-13
opacity Propriedade de Opacidade
A propriedade opacity define a transparência geral de um elemento, com valores de 0 a 1. 0 é totalmente transparente e 1 é totalmente opaco. Diferente de um fundo transparente, opacity afeta o elemento e todo o seu conteúdo, sendo comum para efeitos de fade-in/out e hierarquia visual.
| Categoria | |
|---|---|
| Valor Inicial | 1 |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | number |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
opacity: <number [0,1]>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<number [0,1]> | Tipo | 0 totalmente transparente, 1 totalmente opaco |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| opacity | ✓ v25 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v15 |
| Suportado em todos os principais navegadores | |||||
Aviso： opacity afeta o elemento inteiro, incluindo seus filhos; para tornar apenas o fundo transparente, use cores rgba ou hsla.
Dica： opacity é uma propriedade transicionável, frequentemente usada para criar animações de fade-in e fade-out.
❓ Perguntas Frequentes
QQual é a diferença entre a transparência de opacity e rgba?
Aopacity se aplica a todo o elemento, tornando o fundo, o texto, as bordas e todos os filhos transparentes juntos, e cria um novo contexto de empilhamento. rgba() afeta apenas o canal alfa da única propriedade que você especifica (como a cor de fundo), deixando o texto e os filhos opacos. Use rgba() quando quiser um fundo translúcido com texto nítido, e opacity quando quiser desvanecer o elemento inteiro.
QQual é a diferença entre opacity: 0 e display: none?
ACom opacity: 0 o elemento ainda ocupa espaço, permanece clicável, pode participar de transições e os leitores de tela ainda podem ler seu conteúdo. Com display: none o elemento é removido do fluxo do documento inteiramente — sem espaço, sem interação, sem conteúdo legível. Animações de fade devem usar opacity; use display: none apenas quando quiser remover o elemento completamente.
QQual é a diferença entre opacity: 0 e visibility: hidden?
AAmbos tornam um elemento invisível e não clicável, mas opacity: 0 mantém o espaço, permanece legível por leitores de tela e suporta transições suaves. visibility: hidden mantém o espaço de layout, mas oculta o conteúdo também das tecnologias assistivas e não pode ser animada suavemente. Use opacity para animação e visibility: hidden para ocultar simplesmente.
QPor que as animações de opacity são mais suaves?
Aopacity é uma propriedade de composição: o navegador a mescla na thread do compositor sem disparar layout ou pintura, então atinge facilmente 60fps. Modificar top ou left, por outro lado, força reflow e repaint. Efeitos de fade-in/out e de revelação no hover combinam bem com opacity e transition. Observe que opacity cria um contexto de empilhamento, o que pode afetar como elementos fixed são empilhados.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
