Box Shadow Generator

Sobre esta ferramenta

Horizontal — positivo move a sombra para a direita, negativo para a esquerda. Vertical — positivo move para baixo, negativo para cima. Desfoque — valores maiores criam sombras mais suaves e difusas. Expansão — positivo expande a sombra, negativo a encolhe.

Ative inset para criar sombras internas. Adicione várias sombras com "+ Adicionar sombra" — são separadas por vírgulas na saída CSS, empilhadas da frente para trás.

Como usar

1. Ajuste os controles Horizontal e Vertical para definir o deslocamento da sombra.
2. Aumente o Desfoque para uma sombra suave, ou defina como 0 para uma sombra nítida.
3. Use a Expansão para aumentar ou diminuir o tamanho da sombra além do elemento.
4. Clique em "+ Adicionar sombra" para empilhar várias sombras e obter efeitos mais ricos.

Casos de uso

Designers usam box-shadow para profundidade e elevação em componentes de card. Sombras inset criam efeitos de botão pressionado. Várias sombras empilhadas produzem iluminação realista com luz ambiente e luz principal.

Perguntas frequentes

• O que é a opção inset? — Sombras inset aparecem dentro da borda do elemento em vez de fora. São úteis para criar efeitos de pressed em inputs e botões.
• Posso adicionar várias sombras? — Sim. Clique em "+ Adicionar sombra" para adicionar outra camada de sombra. Todas se combinam em uma declaração box-shadow separada por vírgulas.
• O que faz um valor negativo de expansão? — Uma expansão negativa encolhe a sombra menor que o elemento. Combinada com deslocamento e desfoque, cria uma sombra sutil que aparece apenas por um lado.