Como usar: Gerador de Box Shadow
- Escolha Box shadow ou Text shadow e comece por uma predefinição, como Em camadas (realista) ou Neumorfismo.
- Selecione uma camada e ajuste o deslocamento X/Y, o desfoque, o espalhamento, a cor, a opacidade e o inset com os controles deslizantes ou os campos numéricos.
- Adicione, duplique ou exclua camadas. Empilhar várias sombras suaves gera a profundidade mais natural.
- Altere o fundo da prévia, a cor do cartão e o raio para combinar com o seu design e clique em Copiar CSS.
O que é a propriedade box-shadow do CSS?
box-shadow desenha uma ou mais sombras ao redor (ou dentro) da caixa de borda de um elemento. Cada sombra é escrita como [inset] <x> <y> [blur] [spread] <cor>, e várias sombras são separadas por vírgulas — a primeira é pintada por cima. As sombras seguem o border-radius, não afetam o layout e não geram barras de rolagem.
| Valor | O que faz |
|---|---|
| Deslocamento X / Y | Move a sombra para a direita/baixo (valores negativos vão para a esquerda/cima). |
| Blur (desfoque) | Suaviza a borda; 0 gera uma sombra nítida. Não pode ser negativo. |
| Spread (espalhamento) | Aumenta (positivo) ou diminui (negativo) a sombra antes do desfoque. |
| Cor | Geralmente uma cor escura com baixa opacidade, por exemplo rgba(15, 23, 42, 0.08). |
| inset | Desenha a sombra dentro da caixa — útil para botões pressionados e áreas afundadas. |
Sombras realistas em camadas
Objetos reais projetam uma sombra de contato nítida e uma sombra ambiente ampla e suave. Uma única sombra grande parece chapada; várias camadas com deslocamento e desfoque dobrando (1px, 2px, 4px, 8px, 16px…) e baixa opacidade ficam naturais — experimente a predefinição Em camadas. Um espalhamento negativo em uma camada grande e desfocada (Cartão elevado) mantém a sombra embaixo do cartão, sem vazar pelas laterais. Para um resultado mais limpo, use uma cor de sombra tingida com a tonalidade do fundo em vez de preto puro.
Neumorfismo, brilhos e anéis de foco
O neumorfismo combina uma sombra clara (superior esquerda) e uma sombra escura (inferior direita) em um elemento da mesma cor do fundo. Fica suave, mas com contraste muito baixo, então não dependa só dele para mostrar botões ou estados. Uma sombra sem desfoque e com espalhamento positivo funciona muito bem como anel de foco que segue o border-radius: 0 0 0 2px #fff, 0 0 0 4px #4f46e5.
text-shadow
text-shadow usa a mesma sintaxe, sem spread e inset. Use com moderação para melhorar a legibilidade sobre imagens, ou empilhe camadas para efeitos de neon, contorno e 3D retrô (veja as predefinições de Text shadow). Evite sombra em textos corridos; ela reduz a nitidez.
Desempenho e dicas para o Webflow
Sombras grandes e desfocadas são baratas para exibir, mas caras para animar. Em vez de fazer transição de box-shadow ao passar o mouse, coloque a sombra de hover em um pseudo-elemento ::after e anime a sua opacity. No Webflow, adicione cada camada no painel Style em Effects → Box shadows (escolha Outside ou Inside) — a tabela abaixo da saída CSS lista os valores de cada camada, com o espalhamento identificado como Size, como no Webflow. Combine as sombras com um fundo do Gerador de Gradiente CSS.
Também pesquisado como: box shadow, sombra css, text-shadow, drop shadow, neumorfismo, sombra em camadas, sombra inset, elevação css.
Ferramentas que combinam com: Gerador de Box Shadow
- Gerador de Botão CSS — Crie um botão que fica ótimo em todos os estados.
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
- Calculadora de braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
- Minificador CSS — Cole uma folha de estilos para reduzi-la na hora.
Perguntas frequentes
Qual é a diferença entre blur e spread no box-shadow?
Como adiciono sombra só de um lado?
0 8px 6px -6px rgba(0,0,0,.3) para uma sombra só na parte de baixo.box-shadow ou filter: drop-shadow() é melhor?
box-shadow segue a caixa e o raio do elemento e aceita spread e inset. filter: drop-shadow() segue o formato visível real, incluindo PNGs transparentes e SVGs, mas não tem spread nem inset e pode ser mais pesado para renderizar.