O que é
Este gerador cria sombras em CSS de forma visual, usando a propriedade box-shadow. Você ajusta os controles e vê a sombra mudar na hora em um elemento de exemplo, com o código pronto para copiar e colar no seu site.
O box-shadow é formado por alguns valores: o deslocamento horizontal (X) e vertical (Y), que movem a sombra; o desfoque (blur), que suaviza a borda; o espalhamento (spread), que aumenta ou reduz o tamanho; e a cor, geralmente com transparência (opacidade) para um efeito natural. Há ainda a opção inset, que joga a sombra para dentro do elemento.
Com a ferramenta você monta desde uma sombra sutil de card até efeitos mais fortes, sem precisar decorar a ordem dos valores. A cor é convertida para rgba com a opacidade escolhida, e tudo é gerado no seu navegador.
Como usar
- Ajuste o deslocamento X e Y para posicionar a sombra.
- Aumente o desfoque para suavizar e o espalhamento para engrossar.
- Escolha a cor e a opacidade (transparência).
- Ative 'inset' para sombra interna, se quiser, e copie o código.
Exemplos
- Sombra sutil de card: 0px 10px 20px 0px com opacidade baixa.
- Sombra forte para destaque com blur alto.
- Sombra interna (inset) para dar profundidade a um campo.
- Sombra colorida usando uma cor com transparência.
Perguntas frequentes
O que significam os valores do box-shadow?
Na ordem: deslocamento horizontal (X), deslocamento vertical (Y), desfoque (blur), espalhamento (spread) e a cor. Exemplo: box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.25). O X e o Y movem a sombra; o blur suaviza; o spread aumenta o tamanho.
Para que serve o inset?
O inset joga a sombra para dentro do elemento, em vez de projetá-la para fora. É útil para dar sensação de profundidade em campos de formulário, botões pressionados e áreas rebaixadas.
Como deixar a sombra mais suave?
Aumente o desfoque (blur) e reduza a opacidade da cor. Sombras suaves de cards costumam usar um Y positivo pequeno, blur médio-alto e opacidade baixa (em torno de 10% a 25%).
Posso usar mais de uma sombra no mesmo elemento?
Sim, no CSS dá para separar várias sombras por vírgula na mesma propriedade box-shadow. Esta ferramenta gera uma sombra por vez; você pode gerar duas e juntá-las com vírgula no seu código.