Como usar
- Ajuste Deslocamento horizontal e Deslocamento vertical para posicionar a sombra.
- Ajuste Desfoque e Expansão para definir a suavidade e o tamanho da sombra.
- Defina Cor e Opacidade para ajustar o tom e a transparência.
- Clique em + Adicionar camada se quiser combinar sombras.
- Clique em Copiar CSS para copiar a declaração box-shadow completa e cole na regra CSS do seu elemento. Se precisar só do valor, use Copiar valor.
Exemplos
Sombra em duas camadas para um card de produto
Entrada
Camada 1: x 0, y 2, desfoque 4, expansão -2, cor #000000, opacidade 0.1. Camada 2: x 0, y 4, desfoque 6, expansão -1, cor #000000, opacidade 0.1.
Saída
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Sombra interna para um botão pressionado
Entrada
x 0, y 2, desfoque 4, expansão 0, cor #000000, opacidade 0.25, Interna (inset) marcada.
Saída
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);
Dicas
- Escolha a cor da sombra com Códigos de cores HTML.
- Combine com um fundo em gradiente do Gerador de gradiente CSS.
Perguntas frequentes
O Raio da prévia entra no CSS gerado?
Raio, Cor da caixa e Fundo alteram apenas a prévia. O CSS gerado contém somente a declaração box-shadow, sem border-radius ou cores de fundo.
Por que a sombra não muda quando digito um valor?
Se um campo estiver inválido, a prévia e o CSS mantêm a última sombra válida. Use pixels inteiros: de -200 a 200 nos deslocamentos e em Expansão, de 0 a 300 em Desfoque, e valores de 0 a 1 em Opacidade.
Posso usar uma cor hexadecimal com transparência?
O campo Cor aceita #RGB ou #RRGGBB, com ou sem #, mas não aceita hexadecimal com alfa. Defina a transparência em Opacidade; a cor será escrita como rgba() no CSS.
Minhas configurações ficam salvas?
As camadas e os ajustes da prévia ficam salvos no localStorage do navegador para a próxima visita. Clique em Redefinir para remover esse estado salvo e voltar aos valores padrão.