Monte uma box shadow camada por camada
Este gerador de box shadow escreve a propriedade CSS <code>box-shadow</code> para você. Empilhe quantas camadas de sombra precisar, ajuste o deslocamento horizontal e vertical, o desfoque, a expansão, a cor e a opacidade de cada uma, transforme-a em sombra interna (inset) e veja a caixa de prévia se atualizar sobre qualquer fundo. Comece por presets de sombras suaves, elevação estilo Material, neumorphism, deslocamentos duros e brilhos, e depois copie o CSS ou uma classe Tailwind <code>shadow-[…]</code>. Cole uma sombra existente para editá-la. Tudo roda no seu navegador.
Como criar uma box shadow CSS
- 1Escolha um preset próximo do que você quer ou mantenha a sombra em camadas padrão.
- 2Selecione uma camada e ajuste o deslocamento X e Y, o desfoque, a expansão, a cor e a opacidade. Ative Inset para desenhá-la dentro da caixa.
- 3Use Adicionar camada, duplique, reordene e oculte camadas para combinar várias sombras.
- 4Mude o fundo da prévia, a cor da caixa, o raio dos cantos e o tamanho para combinar com o seu design.
- 5Copie o CSS ou a classe Tailwind.
Os valores de box-shadow explicados
- Deslocamento X e Y
- Quanto a sombra é movida para a direita e para baixo. Valores negativos a movem para a esquerda e para cima. Uma fonte de luz acima da página significa um deslocamento Y positivo.
- Raio de desfoque
- O quanto a borda é suave. 0 gera uma cópia nítida da caixa; valores maiores espalham a sombra por uma área mais ampla e mais fraca. Não pode ser negativo.
- Raio de expansão
- Aumenta ou diminui a sombra antes do desfoque. Uma expansão negativa com um desfoque grande impede que a sombra suave apareça nas laterais, que é o truque por trás da maioria das sombras "suaves".
- Cor
- Normalmente preto ou um tom escuro do fundo com opacidade baixa. Tingir a sombra com a cor do fundo fica mais natural do que cinza puro.
- inset
- Desenha a sombra dentro da borda em vez de fora, e a caixa parece afundada. Sombras inset e externas podem ser misturadas na mesma declaração.
Por que usar várias camadas de sombra?
Sombras reais têm um núcleo escuro e concentrado onde o objeto quase toca a superfície e uma penumbra suave e ampla mais longe. Uma única camada de box-shadow só consegue desenhar uma dessas partes. Empilhar de duas a cinco camadas com deslocamentos e desfoques dobrando a cada vez, todas com opacidade baixa, dá a profundidade suave e realista usada pelos design systems modernos. O preset Camadas suaves faz exatamente isso.
As camadas são pintadas de frente para trás: a primeira da lista fica por cima. Reordene-as com os botões de seta e oculte uma camada com o ícone de olho para ver o que ela acrescenta. Camadas ocultas ficam de fora do CSS copiado.
Elevação, neumorphism e outros estilos
Os presets Elevação 1–5 seguem as sombras clássicas de cartões do Material Design: cada nível combina uma sombra ambiente com uma sombra principal, afastando mais o cartão da página.
O Neumorphism usa duas sombras numa caixa da mesma cor do fundo: uma escura deslocada para baixo e para a direita e uma clara deslocada para cima e para a esquerda. Só funciona quando as cores da caixa e do fundo são iguais, por isso o preset define as duas. O Deslocamento duro elimina o desfoque para um visual chapado e brutalista, e o Brilho usa deslocamento zero com uma sombra colorida para anéis de foco e efeitos neon em fundos escuros.
Box shadows no Tailwind CSS
As classes nativas do Tailwind, de shadow-sm a shadow-2xl, cobrem os casos comuns. Para todo o resto, o gerador escreve um valor arbitrário como shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)]: os espaços viram sublinhados porque nomes de classe não podem ter espaços, e a classe funciona no Tailwind 3 e 4 sem editar a configuração.
Combine uma sombra com um fundo do gerador de gradiente CSS ou confira se o texto do seu cartão continua legível com o verificador de contraste.
Sombras e desempenho
Raios de desfoque grandes são desenhados pela GPU em todos os navegadores atuais e custam pouco em elementos estáticos. Já animar box-shadow repinta o elemento a cada quadro; para animar a profundidade no hover, coloque a sombra maior num pseudoelemento e anime a opacity dele.
Perguntas frequentes
- Qual é a sintaxe de box-shadow?
- box-shadow: [inset] offset-x offset-y [blur] [spread] cor;. Só os dois deslocamentos são obrigatórios. Separe várias sombras com vírgulas, por exemplo box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- Como faço uma sombra suave e discreta?
- Use preto com opacidade baixa (10–20%), um desfoque grande, um deslocamento Y pequeno e uma expansão negativa, como 0 10px 30px -5px rgba(0,0,0,0.15). Empilhar duas ou três sombras assim fica ainda mais suave.
- Como coloco sombra em apenas um lado?
- Desloque a sombra para esse lado e use uma expansão negativa mais ou menos do tamanho do desfoque para que ela não apareça nos outros lados, por exemplo 0 8px 6px -6px rgba(0,0,0,0.3) para uma sombra só embaixo.
- O que o inset faz?
- inset desenha a sombra dentro da caixa em vez de atrás dela, fazendo o elemento parecer afundado na página. É comum em campos de formulário e botões pressionados.
- Qual é a diferença entre box-shadow e drop-shadow?
- box-shadow segue a caixa do elemento e o raio da borda. A função filter: drop-shadow() segue os pixels realmente visíveis, como o contorno de um PNG transparente ou de um ícone SVG, mas não tem expansão nem inset.
- Como uso uma box shadow personalizada no Tailwind?
- Copie a classe Tailwind do gerador, um valor arbitrário como shadow-[0_4px_12px_rgba(0,0,0,0.15)], e adicione ao elemento. Você também pode colocar o valor CSS nas configurações boxShadow do seu tema para dar um nome a ele.
- Posso editar uma sombra que já tenho?
- Sim. Cole um valor de box-shadow, uma declaração completa ou uma classe Tailwind shadow-[…] em Importar. Medidas em rem e em são convertidas a 16px.
- Meu CSS é enviado para algum lugar?
- Não. O gerador roda inteiramente no seu navegador.