Gerador de Box Shadow CSS

O que é Box Shadow CSS?

Box-shadow CSS é uma propriedade que adiciona efeitos de sombra à moldura de um elemento. Pode definir múltiplos efeitos separados por vírgulas. O nosso gerador de box-shadow facilita criar e personalizar sombras com um editor visual. Ajuste offsets, desfoque, expansão, cor e crie sombras internas com pré-visualização em tempo real.

Propriedades de Box Shadow

• Offset Horizontal (X): Move a sombra para a esquerda (negativo) ou direita (positivo)
• Offset Vertical (Y): Move a sombra para cima (negativo) ou baixo (positivo)
• Raio de Desfoque: Valores maiores criam mais desfoque. 0 cria bordas nítidas
• Raio de Expansão: Valores positivos expandem a sombra, negativos reduzem
• Cor da Sombra: Cor da sombra com opacidade opcional (use hex com alpha ou rgba)
• Sombra Interna: Altera a sombra de externa para interna (dentro do elemento)

Como Usar

1. Ajuste os offsets horizontal e vertical para posicionar a sombra
2. Defina o raio de desfoque para suavidade e o raio de expansão para tamanho
3. Escolha a cor da sombra e ative a opção interna se necessário
4. Adicione múltiplas sombras para efeitos em camadas e copie o código CSS

Funcionalidades Principais

• Pré-visualização ao vivo: Veja a sombra em tempo real ao ajustar valores
• Múltiplas sombras: Camadas até 5 sombras para efeitos complexos
• Sombras predefinidas: Comece rápido com 6 estilos comuns
• Sombras internas: Crie sombras internas para efeitos de profundidade
• Copiar código CSS: Cópia com um clique da propriedade box-shadow completa