Gradientes CSS e Box Shadows: Um Guia Visual Completo

Fundo com gradiente colorido na tela de um laptop

Gradientes CSS e box shadows são duas das ferramentas visuais mais poderosas e subutilizadas no arsenal de um desenvolvedor web. Quando bem usados, adicionam profundidade, hierarquia e refinamento às interfaces. Quando mal aplicados, fazem tudo parecer um site de 2009. Este guia ensina tanto a mecânica quanto o bom gosto.

Gradientes CSS

Gradientes Lineares

O tipo de gradiente mais comum. Vai de uma cor para outra em linha reta.

/* Básico da esquerda para a direita */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Diagonal */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Múltiplas paradas */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);

/* Com transparência */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));

/* Parada rígida (sem transição) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

O ângulo pode ser especificado em graus (0deg = de baixo para cima, 90deg = da esquerda para a direita) ou com palavras-chave (to top, to right, to bottom-right).

Gradientes Radiais

Irradia para fora a partir de um ponto central.

/* Gradiente circular */
background: radial-gradient(circle, #667eea, #764ba2);

/* Elíptico (padrão) */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* Centro posicionado */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);

/* Efeito de holofote */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);

Gradientes radiais são perfeitos para efeitos de holofote, brilhos e vinhetas.

Gradientes Cônicos

Varre ao redor de um ponto central — como uma roda de cores ou gráfico de pizza.

/* Roda de cores */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* Segmentos de gráfico de pizza */
background: conic-gradient(
  #3b82f6 0% 35%,
  #8b5cf6 35% 60%,
  #10b981 60% 80%,
  #f59e0b 80% 100%
);

/* Padrão xadrez */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;

Texto com gradiente

Um dos efeitos de UI modernos mais populares:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Sobreposições de gradiente em imagens

Essencial para texto legível sobre fotos:

.hero {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.85) 100%),
    url('hero.jpg');
  background-size: cover;
}

Use nosso Gerador de Gradiente CSS para criar gradientes visualmente com prévia ao vivo e copiar o CSS com um clique.

Box Shadows

A sintaxe do box-shadow

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

offset-x / offset-y — posição da sombra (positivo = direita/baixo)
blur-radius — 0 = borda dura, maior = mais suave
spread-radius — positivo expande a sombra, negativo reduz
inset — desenha a sombra dentro do elemento em vez de fora

Sombras básicas

/* Elevação sutil */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Sombra de card */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

/* Sombra grande para modal */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

/* Sombra dura (sem desfoque) */
box-shadow: 4px 4px 0px #1e293b;

Sombras com múltiplas camadas

Várias sombras podem ser empilhadas com vírgulas. Esse é o segredo para sombras realistas:

/* Elevação Material Design */
box-shadow:
  0 2px 1px -1px rgba(0,0,0,0.2),
  0 1px 1px 0 rgba(0,0,0,0.14),
  0 1px 3px 0 rgba(0,0,0,0.12);

/* Camadas para profundidade */
box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07);

A segunda abordagem distribui a energia da sombra em várias camadas, criando uma queda de profundidade mais natural.

Sombras internas (inset)

Desenha sombras dentro do elemento — ótimo para estados de botão pressionado e campos de entrada:

/* Estado de botão pressionado */
button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Campo de input com profundidade */
input {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* Brilho interno estilo vidro fosco */
.glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 20px rgba(0,0,0,0.2);
}

Sombras coloridas

Sombras não precisam ser pretas. Sombras coloridas adicionam vibração:

/* Elevação colorida */
.btn-primary {
  background: #3b82f6;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Brilho para modo escuro */
.card {
  background: #1e293b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

Transições suaves de sombra

Anime sombras no hover para interações satisfatórias:

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

Combinando gradientes e sombras

As interfaces mais refinadas usam gradientes e sombras juntos:

.premium-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 6px -1px rgba(0,0,0,0.2),
    0 20px 40px -5px rgba(0,0,0,0.4);
}

.gradient-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
}

.gradient-button:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  transform: translateY(-1px);
}

Ferramentas para trabalhar mais rápido

Gerador de Gradiente CSS — Crie gradientes visualmente com múltiplas paradas, ângulos e tipos. Prévia ao vivo com cópia em um clique.
Gerador de Box Shadow CSS — Empilhe múltiplas sombras, ajuste desfoque/expansão/cor e obtenha CSS pronto para produção instantaneamente.
Conversor de Formato de Cor — Converta entre HEX, RGB, HSL e RGBA — essencial para definir opacidades de sombra.
Gerador de Paleta de Cores — Gere paletas complementares, análogas e monocromáticas para encontrar pares de cores perfeitos para gradientes.

Gradientes e sombras seguem a mesma regra de todo bom design: a moderação. Uma sombra ou gradiente bem elaborado eleva um componente. Uma dúzia competindo entre si gera ruído visual. Domine as técnicas e use-as com propósito.