Gerador de CSS box-shadow
Construa um valor box-shadow a partir de deslocamento, desfoque, propagação e cor, com múltiplas camadas e predefinições.
Gerador de CSS box-shadow
Ajuste o deslocamento horizontal e vertical, raio de desfoque, raio de propagação e cor, e esta ferramenta monta a declaração box-shadow correspondente conforme você avança. Foi construída para o caso cotidiano — um cartão, um botão, uma modal que precisa se destacar da página — bem como para sombras em camadas feitas de várias sombras empilhadas, a técnica por trás da profundidade suave e realista usada na maioria dos sistemas de design modernos.
O menu suspenso de predefinições oferece elevação subtil, média e forte, cada uma com sua própria contagem de camadas, deslocamento e desfoque já ajustados; escolha personalizado para controlar cada valor você mesmo. A opção de camadas controla quantas sombras se empilham: cada camada adicionada aumenta o deslocamento e desfoque pelo seu índice e reduz sua opacidade, transformando uma sombra única e plana em uma suave e convincente. Inset inverte a sombra para dentro em elementos pressionados, opacidade controla como a cor é lida, e o comutador de unidade produz px ou rem. Ative a variante de modo escuro para uma segunda declaração mais forte envolvida em um bloco @media (prefers-color-scheme: dark) — uma sombra precisa de mais opacidade para permanecer visível em um fundo escuro. Escolha se o resultado sai como uma única linha, uma propriedade personalizada --box-shadow, ou uma classe .box-shadow, e adicione uma linha filter: drop-shadow correspondente para elementos que box-shadow não consegue atingir, como um ícone SVG ou um PNG transparente.
Cada valor é fixado a um intervalo sensato, e uma cor não reconhecida cai de volta para preto em vez de CSS quebrado, portanto a saída sempre cola limpa em uma folha de estilos.
Tudo é executado no seu navegador conforme você ajusta os controles — nenhuma cor ou CSS gerado é jamais enviado para qualquer lugar. Copie o resultado, baixe-o como arquivo .txt ou envie-o para outra ferramenta para continuar trabalhando nele.