Carregando...

Box-shadow CSS

O trabalho responsivo ensinou quando o layout muda. A box-shadow abre Effects & Motion: profundidade suave à volta de um cartão, aspeto premido dentro de um campo, ou um leve relevo num botão — tudo pintado com uma só propriedade, box-shadow, sem alterar o tamanho do box model.

Partes da sombra

📊 Partes de box-shadow num relance

Parte Trabalho do dia a dia
offset-x / offset-y Onde a sombra fica em relação à caixa (positivo = direita / baixo)
blur-radius Suavidade — 0 é nítido; valores maiores suavizam o bordo
spread-radius Opcional: cresce ou encolhe a forma da sombra antes do blur
color Costuma ser rgba(...) para a sombra ficar semi-transparente
inset Palavra-chave opcional — desenha a sombra dentro da caixa
Várias listas Sombras separadas por vírgulas empilham-se (longe suave + perto nítida)

Pense em elevação, não em spam de decoração. Uma camada suave sob um cartão costuma ganhar a três contornos gritantes.

Elevação exterior suave

Receita comum para um cartão: pequeno desvio para baixo, blur moderado, pouco ou nenhum spread, e um preto (ou cinza) translúcido. A sombra deve sugerir luz de cima — não um retângulo preto colado atrás da caixa.

Elevação calma para um cartão

css 
.card {
background: #fff;
border-radius: 0.75rem;
padding: 1.25rem;
box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
}

Um offset-y positivo coloca a sombra abaixo da caixa. Mantenha o alpha baixo para o texto e os vizinhos continuarem legíveis.

Inset — profundidade dentro da caixa

Adicione a palavra-chave inset para desenhar a sombra para dentro. Útil para poços, botões premidos ou campos que devem parecer recuados.

Poço inset para um campo

css 
.field {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
box-shadow: inset 0 0.125rem 0.35rem rgba(15, 23, 42, 0.08);
}

Inset não substitui border nem padding — só muda como a luz parece cair dentro da área pintada.

Sombras em camadas

Liste mais do que uma sombra, separadas por vírgulas. Uma camada longe e suave mais uma mais perto e apertada costuma ler-se como elevação natural, sem contorno pesado.

Relevo suave em duas camadas

css 
.panel {
background: #fff;
border-radius: 1rem;
box-shadow:
0 0.125rem 0.25rem rgba(15, 23, 42, 0.06),
0 0.75rem 1.5rem rgba(15, 23, 42, 0.1);
}

A ordem na lista é a ordem de pintura; ambas pertencem ao mesmo elemento. Prefira duas camadas discretas a uma mancha opaca.

Reset, destaque e foco na caixa

Defina box-shadow: none quando um estado deve voltar a ficar plano. Uma sombra tingida pode apoiar um accent de marca — mantenha o blur suave e o alpha modesto. Lembre-se: glifos usam text-shadow (Efeitos de texto); caixas usam box-shadow.

Reset plano e accent tingido

css 
.chip {
box-shadow: none;
}

.chip.is-accent {
box-shadow: 0 0.35rem 0.9rem rgba(37, 99, 235, 0.28);
}

Experimente você

  1. Dê a um cartão branco uma única sombra exterior suave (0 no x, y pequeno, blur ~1rem, alpha baixo).
  2. Adicione uma sombra inset a um campo de pesquisa para parecer ligeiramente recuado.
  3. Atualize um painel para uma pilha de duas camadas (perto + longe).
  4. Encontre qualquer box-shadow preto sólido num ficheiro de prática e suavize-o com rgba.
  5. Confirme que um brilho de título usa text-shadow, não box-shadow.

Erros comuns

  • Sombras pretas totalmente opacas que parecem caixas duplicadas
  • Tratar blur e spread como o mesmo controlo
  • Aplicar box-shadow a texto quando queria text-shadow
  • Sombrar cada item de lista, ligação e ícone até a página parecer enevoada
  • Esquecer inset quando o design precisa de aspeto premido ou oco

Resumo

  • box-shadow usa offset, blur, spread opcional, cor e inset opcional
  • Sombras exteriores suaves e translúcidas vendem elevação calma
  • Empilhe camadas separadas por vírgulas para mais profundidade; use none para achatar
  • Caixas ≠ glifos — reserve text-shadow para texto
  • A seguir em Effects & Motion: Transitions

🧠 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

❓
7
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 58 de 63
Css Tutorial