Carregando...

Opacidade CSS

Você já sabe sólidos, fotos e gradientes. Às vezes quer que o elemento inteiro pareça mais suave — uma camada abafada, um botão desativado, um cartão que recua. Essa é a tarefa de opacity: quão sólido ou transparente a caixa inteira parece.

O que faz opacity?

A propriedade opacity define quão opaco é um elemento. O valor vai de 1 (totalmente sólido, o habitual) a 0 (totalmente invisível). Decimais como 0.5 ficam no meio. Importante: a opacidade aplica-se ao elemento e a tudo dentro dele — texto, bordas, fundos e caixas filhas esmaecem juntos.

Opacity vs alfa da cor

É fácil misturar estas duas ideias. Mantenha-as separadas.

📊 Opacity vs alfa da cor

Ferramenta O que esmaece Uso típico
opacity O elemento inteiro (e os filhos) Camadas suaves, aspeto desativado, fade mais tarde
Alfa rgba() / hsla() Só essa camada de cor Fundos transparentes com texto sólido por cima
Palavra transparent Um valor de cor totalmente claro Esconder cor de borda sem remover a propriedade
visibility: hidden Esconde visualmente mas mantém o layout Outra ferramenta — não aprofundamos aqui

Totalmente sólido e meio esmaecido

Comece comparando 1 e 0.5 no mesmo design de cartão.

Sólido vs meia opacidade

css
CSS Code 
.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

O que deve notar

Em .card-soft, o fundo e o texto parecem lavados. Opacity não poupa as letras.

Filhos esmaecem com o pai

Se um pai tem opacity: 0.4, títulos e botões aninhados não «fogem» com o próprio opacity: 1. Já são pintados dentro de uma camada esmaecida.

Opacity do pai lava os filhos

css
CSS Code 
.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}

.overlay strong {
opacity: 1; /* não restaura força total dentro de um pai esmaecido */
}

Implicação de design

Painel fosco com texto nítido? Suavize a cor de fundo com rgba, não o elemento inteiro com opacity.

Prefira rgba quando só o preenchimento deve amolecer

Aqui o fundo do painel é translúcido, mas o texto fica a plena força.

Preenchimento suave, texto sólido

css
CSS Code 
.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* texto a plena força */
padding: 1rem;
}

Hábito de UI abafada

Padrão comum: baixar um pouco a opacity em ações secundárias ou controlos desativados para parecerem mais calmos — mantendo contraste legível.

Botão secundário abafado

css
CSS Code 
.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}

Zero é invisível — o espaço pode ficar

opacity: 0 torna o elemento invisível, mas ainda pode ocupar espaço de layout e, conforme o contexto, receber eventos de ponteiro. Para sair do layout é outra ferramenta (display: none), não só opacity.

Invisível mas ainda no fluxo

css
CSS Code 
.ghost {
opacity: 0;
}

Experimente você

  1. Dois cartões com as mesmas cores; um opacity: 1 e outro opacity: 0.5.
  2. Uma linha a negrito dentro de um pai com opacity: 0.4 — confirme que não «desesmaece» totalmente o filho.
  3. Reconstrua o look suave com background-color: rgba(…, 0.25) e color sólido.
  4. Botão secundário a opacity: 0.75 e verifique a leitura.
  5. Opcional: opacity: 0 numa caixa e note o buraco que deixa no layout.

Erros comuns

  • Pôr opacity no pai quando só queria fundo transparente
  • Esperar que um filho com opacity: 1 pareça sólido dentro de um pai esmaecido
  • Usar opacity: 0 como substituto de remover espaço de layout
  • Baixar a opacity até o texto falhar o contraste
  • Confundir a palavra transparent com a propriedade opacity

Resumo

  • opacity define quão transparente é o elemento inteiro (0–1)
  • Filhos esmaecem com o pai — não escapam totalmente por dentro
  • Para fundos suaves com texto sólido, prefira alfa rgba / hsla
  • Baixa opacity pode silenciar a UI; pense em acessibilidade
  • Invisível (0) não é removido do layout
  • Pratique o par de cartões e a reconstrução com rgba até a diferença ser óbvia

🧠 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

❓
8
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 1 de 1
Css Tutorial