Gerador de Sombra CSS (Box Shadow)

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