EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Gradientes e Sombras CSS

Gradientes

Gradientes criam transições suaves entre cores. O CSS fornece duas principais funções de gradiente.

linear-gradient

Cria um gradiente em linha reta:

Exemplo

HTML 
<style>
.gradient-1 {
  background: linear-gradient(to right, #3498db, #2ecc71);
  height: 80px;
  margin-bottom: 10px;
}
.gradient-2 {
  background: linear-gradient(135deg, #e74c3c, #f39c12, #2ecc71);
  height: 80px;
}
</style>
<div class="gradient-1">Gradiente da esquerda para direita</div>
<div class="gradient-2">Gradiente diagonal multicolorido</div>
▶ Experimente

radial-gradient

Cria um gradiente circular/elíptico:

Exemplo

HTML 
<style>
.radial {
  background: radial-gradient(circle, #3498db, #2c3e50);
  height: 150px;
  border-radius: 50%;
}
</style>
<div class="radial">Círculo de gradiente radial</div>
▶ Experimente

Sombras

box-shadow

Adiciona efeitos de sombra aos elementos:

Exemplo

HTML 
<style>
.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
  background: white;
  border-radius: 8px;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
</style>
<div class="card">Card com sombra</div>
▶ Experimente

text-shadow

Adiciona sombra ao texto:

Exemplo

HTML 
<style>
h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
</style>
<h1>Título com sombra</h1>
▶ Experimente

❓ Perguntas Frequentes

Q Alguma ferramenta para criar gradientes?
R Recomendado: cssgradient.io e webgradients.com — geradores de gradiente arrastar e soltar. Copie código diretamente. Estudar esquemas de gradiente de outros constrói intuição para ângulos e paradas de cor.
Q box-shadow pode ter múltiplas sombras?
R Sim, separe com vírgulas: `box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 8px 32px rgba(0,0,0,0.08);` cria um efeito de sombra dupla. Sombras empilham em ordem de declaração — as primeiras ficam no topo.
Q Qual é a diferença entre text-shadow e box-shadow?
R `text-shadow` age apenas no texto, sem parâmetro de spread, sem suporte a inset. `box-shadow` age em toda a caixa do elemento, tem spread, suporta inset. Sintaxe similar mas capacidades diferentes.

📖 Resumo

📝 Exercícios

  1. Crie um botão gradiente — transição de cor da esquerda para direita, direção muda no hover.
  2. Crie um "card flutuante" — sombra sutil por padrão, sombra mais profunda + elevação no hover.
  3. Use repeating-linear-gradient para criar um padrão de fundo listrado.
  4. Adicione text-shadow ou drop-shadow efeito de brilho a um ícone PNG ou texto.
100%