Como usar: Gerador de box shadow
- 1
Escolha uma sombra inicial
Clique em uma predefinição como Suave, Em camadas ou Elevação 2, ou ajuste a camada padrão.
- 2
Ajuste cada camada
Selecione uma camada e defina o deslocamento X e Y, o desfoque, o espalhamento, a cor, a opacidade e se ela é interna.
- 3
Confira na sua superfície
Mude o tamanho da caixa, o raio da borda e as cores para combinar com o elemento que você está estilizando.
- 4
Copie o CSS
Copie a declaração box-shadow ou a classe do Tailwind para o seu código.
Limites e Pro
Grátis e sem cadastro: camadas ilimitadas, deslocamentos de −100 a 100 px, desfoque de até 200 px e 12 predefinições de sombra.
O Pro remove os anúncios; o editor de sombras é completo em todos os planos. Ver o Pro
Sobre: Gerador de box shadow
A propriedade CSS box-shadow recebe uma lista de camadas, cada uma com deslocamento horizontal e vertical, raio de desfoque, distância de espalhamento, uma cor e a palavra-chave opcional inset. Para conseguir uma profundidade natural, é preciso equilibrar todos esses valores em duas ou mais camadas, o que é difícil quando você edita números direto na folha de estilo. Este editor mostra o resultado em uma caixa de pré-visualização ao vivo enquanto você arrasta os controles e escreve para você a declaração e uma classe shadow-[…] do Tailwind.
Adicione quantas camadas quiser, oculte uma temporariamente para comparar, mova-a para cima ou para baixo (a primeira camada da lista é desenhada por cima) ou troque para interna em botões pressionados e campos de formulário. Os deslocamentos vão de −100 a 100 pixels, o desfoque chega a 200 pixels e o espalhamento vai de −100 a 100, e cada cor tem a própria opacidade. O espalhamento negativo é o segredo das sombras suaves modernas: ele puxa a sombra para baixo do elemento, de modo que só um brilho leve aparece embaixo dele.
A caixa de pré-visualização pode ser redimensionada e receber qualquer raio de borda, cor da caixa e cor de fundo, então você avalia a sombra na superfície real do seu design, inclusive em temas escuros, onde as sombras precisam de mais opacidade ou de um brilho colorido.
Há doze pontos de partida: quatro níveis de elevação do Material Design, uma sombra suave de camada única, uma sombra suave de cinco camadas, um deslocamento rígido neobrutalista, neumorfismo, uma sombra interna, um brilho colorido, um contorno no estilo de foco e um cartão flutuante. Os gradientes ficam na outra aba; sombras de texto e o filtro drop-shadow() não são abordados.
Privacidade
A sombra é criada e visualizada inteiramente nesta página, e suas camadas ficam salvas apenas no armazenamento local deste navegador, para continuarem aqui depois de recarregar. Nenhuma configuração ou design é enviado a um servidor.