Ferramentas CSS/Gerador de Box Shadow
Gerador de Box Shadow
Crie sombras impressionantes com múltiplas camadas e visualização em tempo real
Visualização
#F8FAFC
Camadas de Sombra
Camada 1
#0000001a
0px
4px
6px
-1px
Camada 2
#0000001a
0px
2px
4px
-2px
Presets
Loading...CSS Box Shadow Guide
Learn how to create depth and dimension with shadows
What is Box Shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets, blur and spread radius, and color. It can create depth, highlight elements, and add visual interest to your designs.
How to Use This Tool
- Add shadow layers using the Add Layer button
- Adjust X/Y offset to position the shadow
- Control blur and spread for softness and size
- Toggle 'inset' for inner shadows, then copy the CSS
Pro Tips
- Use multiple subtle shadows for more realistic depth effects
- Negative spread values create tighter, more focused shadows
- Combine outer and inset shadows for neumorphism effects
Browser Support
Box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It has been widely supported since IE9, making it safe for production use.
Perguntas frequentes
Qual a diferenca entre box-shadow e drop-shadow?
box-shadow aplica sombra a caixa retangular do elemento, enquanto drop-shadow (filtro CSS) segue a forma real incluindo transparencia da imagem. drop-shadow e melhor para sombras em PNGs, mas box-shadow oferece mais opcoes (inset, spread).
Posso usar varias sombras em um elemento?
Sim. Separe varias sombras com virgulas. Exemplo: box-shadow: 2px 2px 5px rgba(0,0,0,0.3), -2px -2px 5px rgba(255,255,255,0.5). E util para efeitos neomorficos ou sombras mais realistas com multiplas camadas.
O que e spread e quando usar?
Spread e o quarto valor que expande ou contrai a sombra. Valores positivos aumentam a sombra, negativos a contraem. Spread negativo cria bordas sutis, spread zero da uma sombra natural, e spread positivo cria efeitos como brilho.
Qual a diferenca entre inset e sombra externa?
inset coloca a sombra dentro do elemento, criando efeito de entalhe ou pressionado. Sombra externa (padrao) cria efeito de elevacao como se flutuasse. Inset e eficaz para estados pressed de botoes ou campos de entrada.
box-shadow afeta o desempenho?
box-shadow pode impactar o desempenho, especialmente sombras com blur grande ou muitas camadas. Multiplas sombras em muitos elementos ou sombras que mudam durante animacoes podem causar problemas em dispositivos moveis. Recomenda-se usar will-change com moderacao e simplificar sombras se necessario.