Gerador de box-shadow CSS
Desenhe sombras realistas empilhando várias camadas, como fazem os melhores design systems. Ajuste deslocamento, desfoque, expansão, cor e opacidade de cada camada e copie o resultado em CSS ou como classe Tailwind.
Processado 100% no seu navegador
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
- 1Comece por um estilo (suave, elevação, flutuante…) ou do zero.
- 2Selecione uma camada e ajuste deslocamento, desfoque, expansão, cor e opacidade.
- 3Adicione camadas com «+» para sombras mais naturais, ou marque «inset» para sombra interna.
- 4Mude a cor da caixa, o fundo e o raio, e copie o CSS ou a classe Tailwind.
Casos de uso
- Cards, menus suspensos e modais com profundidade realista.
- Estados de hover e elevação em botões.
- Estilos brutalistas com sombras duras ou efeitos de brilho.
- Campos de formulário com sombra interna.
Perguntas frequentes
Como funciona a propriedade box-shadow?
Recebe deslocamento horizontal e vertical, desfoque, expansão e cor, além da palavra-chave opcional inset. Dá para encadear várias sombras separadas por vírgulas; a primeira é desenhada por cima.
Por que usar várias camadas?
Sombras reais têm uma área nítida perto do objeto e outra difusa mais longe. Sobrepor camadas com desfoques diferentes e pouca opacidade imita esse comportamento e fica muito mais natural.
O que faz o valor de expansão (spread)?
Aumenta (valores positivos) ou reduz (valores negativos) a sombra antes do desfoque. Um spread negativo com muito desfoque cria sombras suaves que não aparecem nas laterais.
Como uso no Tailwind CSS?
Escolha a aba Tailwind e copie a classe com valor arbitrário, por exemplo shadow-[0px_10px_30px_-5px_rgba(0,0,0,0.2)]. Funciona no Tailwind v3 e v4 sem configuração extra.