Gerador de box shadow CSS
Modele uma sombra com controles e copie o CSS.
Caixa e fundo
Funciona no navegador. Nada do que você digita é enviado a lugar nenhum.
- Empilhe até 8 camadas
- Sombras internas
- 6 modelos prontos
Como criar uma sombra CSS
- Comece com um modelo, ou mova os controles de deslocamento, desfoque e expansão.
- Adicione camadas para uma sombra mais suave e natural.
- Copie a linha box-shadow para o seu CSS.
O que cada valor de box-shadow faz
| Valor | Significado | Intervalo típico |
|---|---|---|
| Deslocamento X | Move a sombra para a direita, ou para a esquerda se negativo | -100 a 100px |
| Deslocamento Y | Move a sombra para baixo, ou para cima se negativo | -100 a 100px |
| Desfoque | Suaviza a borda; 0 dá uma sombra com borda dura | 0 a 200px |
| Expansão | Aumenta ou diminui a sombra antes de ela ser desfocada | -100 a 100px |
| Opacidade | Quão sólida a cor da sombra parece | 10 a 30% para um visual natural |
Valores iniciais para visuais comuns
| Modelo | Deslocamento Y | Desfoque | Expansão | Opacidade |
|---|---|---|---|---|
| Suave | 10px | 30px | -5px | 20% |
| Nítida | 6px (também X) | 0px | 0px | 100% |
| Brilho | 0px | 24px | 4px | 55% |
| Interna | 2px | 6px | 0px | 25% |
Em camadas e Flutuante partem desses valores empilhando duas ou três sombras de uma vez, algo que uma única camada não consegue reproduzir.
Dicas para sombras com visual natural
- A luz real raramente projeta uma sombra preta pura. Use 10 a 30 por cento de opacidade, e incline a cor para o tom do fundo para um resultado mais suave.
- Empilhe 2 ou 3 sombras: uma pequena e apertada perto da caixa e outra maior e mais desfocada mais afastada, do jeito que os modelos Em camadas e Flutuante são montados.
- Expansão negativa com um grande deslocamento vertical dá o visual de cartão flutuante comum em interfaces modernas.
- Um elemento pai com overflow: hidden corta uma sombra exatamente como corta conteúdo, então adicione padding ao pai em vez de remover overflow em todo lugar.
Perguntas frequentes sobre Gerador de sombra
O que significam os valores de box-shadow?
Em ordem: deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de expansão e cor. Deslocamentos positivos movem a sombra para a direita e para baixo, e a palavra-chave inset a desenha dentro da caixa.
Como faço uma sombra parecer natural?
Empilhe duas ou três sombras suaves com opacidade baixa: uma pequena e apertada perto da caixa e outra maior e mais desfocada mais afastada. Sombras reais raramente são pretas puras em força total.
O que a expansão faz?
A expansão aumenta ou diminui a sombra antes de ela ser desfocada. Uma expansão negativa com um grande deslocamento vertical dá o visual de cartão flutuante.
Por que minha sombra está cortada?
Um elemento pai com overflow: hidden corta qualquer coisa desenhada fora da sua caixa, sombras incluídas. Adicione padding ao elemento pai ou remova a configuração de overflow.
Quantas camadas de sombra posso empilhar?
Até 8 nesta página. O CSS em si não tem limite fixo de camadas de box-shadow, mas mais de 3 ou 4 raramente parece diferente e custa mais para renderizar.
Uma sombra muda o tamanho ou o espaçamento de um elemento?
Não. Um box-shadow é puramente visual e nunca afeta o layout, diferente de uma borda ou outline, então os elementos vizinhos nunca se deslocam quando você adiciona ou redimensiona uma.