Gerador de CSS Box Shadow
Projete box shadows multicamadas visualmente e copie CSS pronto para produção.
O que é
O Gerador de CSS Box Shadow é um editor visual gratuito para criar a propriedade `box-shadow` perfeita. Em vez de adivinhar valores de offset e raio à mão, você arrasta controles deslizantes e vê o resultado ao vivo. Você pode empilhar múltiplas camadas de sombras e alternar entre o modo normal e inset. Um clique copia o CSS completo pronto para colar.
Como usar
- O cartão de visualização mostra sua sombra em tempo real. Comece ajustando os controles de offset horizontal e vertical.
- Aumente o controle de Desfoque para uma sombra suave difusa ou mantenha-o baixo para um visual de borda dura.
- Escolha uma cor com o seletor e defina a opacidade para misturar a sombra com o fundo.
- Ative "Inset" para inverter a sombra para dentro do elemento, criando um efeito pressionado.
- Clique em "+ Adicionar Camada" para empilhar sombras adicionais. Quando terminar, clique em "Copiar CSS".
Por que usar
Escrever CSS box-shadow à mão é lento e sujeito a erros. Esta ferramenta oferece um editor visual em tempo real para projetar sombras com confiança, incluindo composições multicamadas avançadas. O código exportado é limpo e pronto para usar.
Perguntas frequentes
Quantas camadas de sombra posso adicionar?
Você pode adicionar até 5 camadas independentes. CSS suporta nativamente múltiplos valores box-shadow como lista separada por vírgulas.
O que faz o interruptor "Inset"?
As sombras inset aparecem dentro do elemento em vez de fora. São perfeitas para criar efeitos afundados ou gravados.
Posso exportar o resultado como imagem?
Sim. Clique em "Exportar PNG" para salvar uma captura de tela do cartão de visualização com sua sombra aplicada.
Esta ferramenta também suporta text-shadow?
Esta ferramenta se concentra especificamente na propriedade CSS `box-shadow`. Para sombras de texto, procure um gerador dedicado.
Quais unidades o CSS exportado usa?
Todos os valores são exportados em pixels (px). Se precisar de unidades relativas, você pode escalar manualmente os valores exportados.