Gerador de Sombra CSS (Box Shadow)
Gere efeitos bonitos de box-shadow CSS com pré-visualização em tempo real e propriedades personalizáveis
Pré-visualização ao Vivo
Sombras
Sombra 1
0px
4px
6px
0px
Sombras Predefinidas
CSS Gerado
box-shadow: 0px 4px 6px 0px #00000040;.box {
box-shadow: 0px 4px 6px 0px #00000040;
}O Que é Box Shadow CSS?
CSS box-shadow é uma propriedade que adiciona efeitos de sombra em torno da moldura de um elemento. Pode definir múltiplos efeitos separados por vírgulas. O nosso gerador de sombras facilita a criação e personalização de sombras com um editor visual. Ajuste deslocamentos, desfoque, expansão, cor e crie sombras interiores com pré-visualização em tempo real.
Propriedades da Box Shadow
- Deslocamento Horizontal (X): Move a sombra para esquerda (negativo) ou direita (positivo)
- Deslocamento Vertical (Y): Move a sombra para cima (negativo) ou baixo (positivo)
- Raio de Desfoque: Valores mais altos criam mais desfoque. 0 cria bordas nítidas
- Raio de Expansão: Valores positivos expandem a sombra, valores negativos encolhem
- Cor da Sombra: Cor da sombra com opacidade opcional (use hex com alpha ou rgba)
- Sombra Interior: Muda a sombra de exterior para interior (dentro do elemento)
Como Usar
- Ajuste os deslocamentos horizontal e vertical para posicionar a sombra
- Defina o raio de desfoque para suavidade e raio de expansão para tamanho
- Escolha a cor da sombra e ative inset se necessário
- Adicione múltiplas sombras para efeitos em camadas, depois copie o código CSS
Funcionalidades Principais
- Pré-visualização ao vivo: Veja a sua sombra em tempo real enquanto ajusta valores
- Múltiplas sombras: Sobreponha até 5 sombras para efeitos complexos
- Sombras predefinidas: Comece rapidamente com 6 estilos comuns de sombra
- Sombras interiores: Crie sombras internas para efeitos de profundidade
- Copiar código CSS: Cópia com um clique da propriedade box-shadow completa
