O que é um Gerador de Box Shadow?
Um gerador de box shadow CSS ajuda você a criar efeitos visuais de profundidade para elementos HTML. Ele permite configurar deslocamentos horizontal e vertical, raio de desfoque, raio de expansão e cor, e então gera o código da propriedade CSS box-shadow.
Como Usar Este Gerador de Box Shadow
- Insira valores para deslocamento X, deslocamento Y, desfoque, expansão (em pixels) e cor da sombra (ex.: rgba(0,0,0,0.3)). O código CSS é atualizado automaticamente enquanto você digita.
- Clique em “Gerar” para carregar um preset de sombra aleatório para experimentação rápida.
- Copie a propriedade CSS box-shadow gerada para usar na sua folha de estilo.
Conceitos Principais
A sintaxe do CSS box-shadow é: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. X positivo move para a direita, Y positivo move para baixo. O raio de desfoque cria suavidade; o raio de expansão expande ou contrai a sombra. Múltiplas sombras podem ser empilhadas (separadas por vírgula) para profundidade realista. A palavra-chave inset cria sombras internas.
Perguntas Frequentes
Como criar uma sombra realista?
Use deslocamentos sutis (2-8px), desfoque moderado (10-30px), expansão negativa para sombras mais apertadas e preto semitransparente (rgba(0,0,0,0.1-0.3)). Empilhe múltiplas sombras com diferentes deslocamentos para profundidade.
Posso adicionar múltiplas sombras a um elemento?
Sim. Separe múltiplos valores de sombra com vírgulas. A primeira sombra na lista aparece por cima. Esta técnica cria efeitos de sombra em camadas e realistas.
Box-shadow afeta o layout?
Não. Box shadows são puramente visuais e não afetam o box model ou layout do elemento. Eles podem transbordar para elementos adjacentes, então use overflow ou ajustes de margem se necessário.