Gerador de Box Shadow CSS
Crie box-shadows CSS em camadas com controlos deslizantes ao vivo para desvio, desfoque, propagação, cor, opacidade e inserção — pré-visualize num elemento real e copie o CSS pronto a usar instantaneamente.
box-shadow: —;
Tudo atualiza em direto no seu browser — sem carregamentos, sem registo, completamente gratuito.
Sobre Gerador de Box Shadow CSS
O Gerador de CSS Box Shadow permite projetar sombras de caixa visualmente, em vez de adivinhar valores no código. Arraste os controles deslizantes para deslocamento horizontal e vertical, raio de desfoque, raio de propagação, cor e opacidade — com um alternador de sombra interna — e veja um elemento real atualizar ao vivo. Quando estiver do jeito certo, copie o CSS pronto para colar com um clique.
Sombras de UI modernas raramente são uma única camada. Este gerador oferece camadas de sombra empilhadas: adicione, duplique, oculte ou remova camadas, e visualize apenas a camada selecionada ou todas combinadas. Empilhar uma sombra escura e estreita sob uma sombra ampla e suave é como cartões e botões refinados ganham profundidade.
Você também pode estilizar o próprio elemento de visualização — cor da caixa, raio da borda e fundo da tela — para que a sombra seja avaliada em um contexto realista, incluindo superfícies escuras. Comece a partir de um predefinido, clique em "Randomizar camada" para se inspirar, e redefina sempre que quiser um ponto de partida limpo. Tudo roda no seu navegador.
Como usar Gerador de Box Shadow CSS
- Ajuste os controles deslizantes de deslocamento horizontal, deslocamento vertical, desfoque, propagação, cor e opacidade, e ative "Sombra interna" se quiser uma sombra interna.
- Clique em "Adicionar camada" ou "Duplicar camada" para empilhar sombras, e alterne o modo de visualização entre "Esta camada" e "Todas as camadas" para ajustar cada uma.
- Ajuste o elemento e a tela — cor da caixa, raio da borda e fundo — para que a visualização corresponda ao seu design real.
- Aplique um predefinido ou use "Randomizar camada" se quiser um ponto de partida em vez de controles deslizantes zerados.
- Copie a regra CSS completa (ou apenas o valor) e cole na sua folha de estilo.