Gerador de Box Shadow
Gerador de Box Shadow CSS
Crie efeitos de sombra profissionais para seus elementos CSS
Visualizacao
Sombras
Presets
CSS Gerado
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
Sobre o Gerador de Box Shadow
Esta ferramenta permite criar efeitos de sombra CSS profissionais e personalizados. Ajuste cada parâmetro em tempo real e veja a visualização instantânea.
Parametros disponíveis:
- Deslocamento Horizontal (X): Movimenta a sombra para esquerda (-) ou direita (+)
- Deslocamento Vertical (Y): Movimenta a sombra para cima (-) ou para baixo (+)
- Desfoque (Blur): Aumenta o desfoque da sombra (0 a 50px)
- Espalhamento (Spread): Expande ou contrai a sombra (-25 a 50px)
- Cor: Escolha a cor da sombra com o seletor de cores
- Opacidade: Controla a transparência da sombra (0% a 100%)
- Interno (Inset): Inverte a sombra para dentro do elemento
- Multiplas Sombras: Combine várias sombras para efeitos mais complexos
Exemplo de saída CSS:
.elemento {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
Copie o CSS gerado e cole diretamente no seu arquivo de estilos. Suporte total para navegadores modernos.