Gerador de sombras CSS
Desenha box-shadows.
Sobre esta ferramenta
Permite regular o deslocamento em X e Y, o desfoque, a expansão e a cor da sombra, com inset opcional, e exportar depois a declaração box-shadow ou uma classe arbitrária shadow-[…] do Tailwind.
Como usar
Mexa nos controlos numéricos, acompanhe o cartão de pré-visualização e copie a sombra no formato que o seu projeto usa.
Exemplo
A elevação inicial corresponde a um cartão suspenso sobre fundo escuro.
Entrada
0 8px 24px 0 rgba(0,0,0,0.2)Saída
box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.2);Dica
As sombras suaves de interface raramente coincidem com a escala predefinida, por isso os valores arbitrários ajudam.
Bom saber
Posso empilhar várias sombras?
O gerador produz uma camada de sombra de cada vez. Combine camadas juntando os valores com vírgulas no seu CSS.
Como é construída a classe Tailwind?
Os espaços passam a sublinhados dentro de shadow-[…], que é como o Tailwind lê valores arbitrários. Os espaços em cores rgba() são removidos, como a ferramenta já faz.