Anatomia do box-shadow
A propriedade box-shadow recebe, nesta ordem: deslocamento horizontal (X), vertical (Y), desfoque, espalhamento e cor. O prefixo inset joga a sombra para dentro. Sombras suaves (desfoque alto, opacidade baixa) dão profundidade discreta a cartões e botões.
Como usar
- Ajuste X e Y (de −50 a 50 px) para mover a sombra; valores positivos levam para a direita e para baixo.
- Use Desfoque (0 a 100 px) para suavizar a borda e Espalhar (−50 a 50 px) para aumentar ou encolher a sombra.
- Escolha a Cor e a Opacidade; a ferramenta gera a cor em
rgba(). - Marque Sombra interna (inset) se quiser a sombra dentro da caixa.
- Copie o código do campo CSS com o botão copiar.
Exemplos
- Padrão da ferramenta:
box-shadow: 0px 10px 25px 0px rgba(30,77,123,0.25);, uma sombra suave abaixo do cartão. - Sombra curta e nítida (X 0, Y 2, desfoque 4, cor preta, opacidade 15%):
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);. - Campo afundado:
box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.20);.
Dúvidas frequentes
Posso ter várias sombras?
Sim, separando por vírgula. A ferramenta gera uma sombra por vez: crie as duas (uma curta e nítida, outra longa e suave), copie e junte no CSS. Empilhar sombras assim cria um efeito de elevação mais realista.
Para que serve o espalhamento negativo?
Ele encolhe a sombra antes do desfoque. Com Y positivo, faz a sombra aparecer só embaixo do elemento, sem vazar nas laterais.