Gerador de box-shadow CSS
Ajuste deslocamento, desfoque, espalhamento, cor e opacidade e copie o box-shadow, com prévia.
- Roda no seu navegador
Carregando a ferramenta…
O que cada número faz na sombra
| Valor | Efeito |
|---|---|
| Deslocamento horizontal | positivo empurra a sombra para a direita; negativo, para a esquerda |
| Deslocamento vertical | positivo empurra para baixo; negativo, para cima |
| Desfoque (blur) | 0 deixa a borda nítida; quanto maior, mais larga e suave a transição. Não aceita negativo |
| Espalhamento (spread) | positivo aumenta a sombra em todos os lados antes do desfoque; negativo a encolhe |
| Opacidade | de 0 a 100, vira o canal alfa do rgba (100 é opaco) |
Ordem dos valores: inset (opcional), x, y, desfoque, espalhamento, cor
Exemplos de resultado
| Valores (x, y, desfoque, espalhamento, opacidade) | Resultado |
|---|---|
| 4, 4, 10, 0, 25, cor preta | box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.25); |
| 0, 8, 24, -4, 20, cor preta (sombra de cartão) | box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.2); |
| 0, 2, 6, 0, 30, cor preta, sombra interna | box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.3); |
| 6, 6, 0, 0, 100, cor 336699 (sem desfoque) | box-shadow: 6px 6px 0 0 rgba(51, 102, 153, 1); |
O espalhamento negativo da sombra de cartão recolhe a sombra nas laterais e a concentra embaixo.
Limites da sombra
- Deslocamentos e espalhamento vão de -200 a 200; o desfoque, de 0 a 300.
- Gera uma sombra só; várias sombras separadas por vírgula, text-shadow e drop-shadow ficam de fora.
- A cor é digitada em hexadecimal, com 3 ou 6 dígitos. Não há seletor de cor, nomes de cor nem rgb(): a prévia mostra o resultado.
Perguntas frequentes
Como usar o gerador de box shadow para uma sombra interna?
Marque a opção de sombra interna. A palavra inset entra no começo da declaração: com 0, 2, 6 e 0 e opacidade 30 o resultado é box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.3);
O que é o spread no css box-shadow?
É o espalhamento: valor positivo aumenta a sombra em todos os lados e negativo a encolhe, sempre antes do desfoque. O blur, por sua vez, só suaviza a borda.
Como funciona o blur no css box-shadow?
O blur define a largura da transição entre a sombra e o fundo. A ferramenta aceita de 0 a 300; com 0 a borda fica nítida, como em box-shadow: 6px 6px 0 0 rgba(51, 102, 153, 1);