Central de Conhecimento e Guia
Gerador de Box-Shadow CSS, Profundidade e Design de Camadas
Gerador de Box-Shadow CSS, Profundidade e Design de Camadas
Esta ferramenta opera 100% do lado do cliente. Seus códigos, tokens, credenciais e dados confidenciais nunca saem do seu navegador nem são transmitidos a servidores remotos.
Fórmula e Método de Cálculo
box-shadow: [X-Offset] [Y-Offset] [Blur-Radius] [Spread-Radius] [Color] [Inset]
You can stack multiple shadows on a single element by separating them with commas, which is essential for creating hyper realistic, diffuse ambient lighting.
Melhores Práticas e Dicas
- Layer Multiple Subtle Shadows: A single harsh black shadow looks cheap and dated. Professional UI design uses a tight, dark shadow for immediate depth, combined with a large, highly transparent shadow for ambient light dispersion.
- Use RGBA for Transparency: Never use solid hex colors for shadows. Always use RGBA or HSLA with a very low alpha channel (e.g., 0.05 to 0.15) so the shadow realistically blends with whatever background color sits behind it.
- Match Real World Lighting: In the real world, light usually comes from above. Therefore, your Y Offset should almost always be positive (pushing the shadow down), while the X Offset remains close to zero.
Perguntas Frequentes
O que faz o Raio de Propagação (Spread Radius)?
O raio de propagação expande ou contrai a área física da sombra antes de o desfoque ser aplicado. Uma propagação positiva torna a sombra maior que o elemento, enquanto uma propagação negativa a puxa para dentro (ótimo para elementos flutuantes).
Como crio uma sombra interna?
Adicione a palavra-chave `inset` ao final da regra CSS. Isso inverte a sombra, fazendo-a ser renderizada dentro da caixa delimitadora e criando um efeito chanfrado, em baixo-relevo ou 'pressionado' típico do neumorfismo.
Sombras box-shadow causam problemas de desempenho?
Sim. Animar box-shadows (como em efeitos de hover) força o navegador a repintar constantemente os pixels, o que pode causar lentidão em dispositivos móveis mais básicos. Muitas vezes é mais performático animar a `opacity` de um pseudo-elemento que contém a sombra.