CSS: Gradientes e Sombras CSS

Última atualização: 2026-10-13

Propriedades nesta seção: text-shadow box-shadow

1. Gradientes

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

(1) linear-gradient

Cria um gradiente em linha reta:

▶ Exemplo

▶ Experimente

(2) radial-gradient

Cria um gradiente circular/elíptico:

▶ Exemplo

▶ Experimente

2. Sombras

(1) box-shadow

Adiciona efeitos de sombra aos elementos:

▶ Exemplo

▶ Experimente

(2) text-shadow

Adiciona sombra ao texto:

▶ Exemplo

▶ Experimente

Propriedades nesta seção: text-shadow box-shadow

❓ Perguntas Frequentes

P 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.

P 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.

P 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

Gradientes e sombras são duas ferramentas poderosas para qualidade visual
linear-gradient é mais comum para botões, fundos, sobreposições
box-shadow adiciona profundidade; sombras de hover em cards são o uso mais comum
text-shadow decora texto; drop-shadow segue contornos reais do elemento
Combinar ambos cria designs mais polidos e em camadas

📝 Exercícios

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

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós