Gerador box-shadow
Crie sombras CSS de várias camadas com pré-visualização ao vivo.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Sombras com relevo real, sem tentativas
Acertar uma sombra à mão significa recarregar a página dez vezes. Aqui move os controlos e a pré-visualização reage ao vivo. Empilhe várias camadas para uma profundidade realista e copie o CSS exato.
-
Ajuste a camada
Deslocamento X/Y, desfoque, extensão, cor e opacidade.
-
Adicione camadas
Misture uma sombra nítida e uma difusa para um aspeto natural.
-
Copie o CSS
A propriedade box-shadow completa, pronta a colar.
Compreender a sintaxe
| Valor | Função |
|---|---|
| offset-x | Deslocamento horizontal (direita se positivo) |
| offset-y | Deslocamento vertical (baixo se positivo) |
| blur | Raio de desfoque (maior = mais suave) |
| spread | Aumenta (+) ou reduz (−) a sombra |
| color | Cor, muitas vezes rgba() para a opacidade |
| inset | Coloca a sombra dentro da caixa |
Tudo é gerado no seu navegador. Exemplo por defeito: box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
Perguntas frequentes
O que significam os valores de box-shadow?
Por ordem: deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de extensão e depois a cor. Exemplo: «0 10px 25px -5px rgba(124, 58, 237, 0.35)» desloca a sombra 10px para baixo, desfoca-a em 25px e reduz-a 5px.
Para que serve o raio de extensão (spread)?
Aumenta (valor positivo) ou reduz (valor negativo) a sombra antes do desfoque. Um spread negativo é ótimo para sombras suaves e recolhidas, como um cartão a flutuar ligeiramente sobre a página.
Como empilho várias sombras?
Separe cada camada com uma vírgula. A primeira listada é desenhada por cima. Combinar uma sombra nítida e justa com outra ampla e difusa fica muito mais natural do que uma só sombra.
Qual a diferença entre box-shadow e drop-shadow?
box-shadow segue o retângulo da caixa (e o seu border-radius). filter: drop-shadow() segue a forma real, incluindo transparência — ideal para PNGs recortados e SVGs. Para um cartão ou botão, box-shadow é a escolha certa.