chevron_right

Gerador de Box Shadow

Crie sombras CSS visualmente com prévia em tempo real.

Predefinições

Shadow {{idx + 1}}

H-Offset: 0px

V-Offset: 4px

Blur: 16px

Spread: 0px

Cor

Inset

Outset

CSS gerado

box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.15);

Ferramentas semelhantes

Gerador de text-shadow

Crie efeitos de CSS text-shadow com pré-visualização ao vivo.

Gerador de Keyframes CSS

Crie keyframes CSS personalizados visualmente com preview ao vivo e codigo pronto para copiar.

Gerador de gradientes

Crie gradientes CSS visualmente com pré-visualização ao vivo.

Gerador de animacoes CSS

Crie animacoes CSS reutilizaveis com visualizacao de movimento e keyframes prontos para copiar.

Calculadora de Número da Semana

Obtenha o número da semana ISO 8601, número da semana dos EUA, dia do ano e dias restantes para qualquer data.

Auto Crop Transparent Pixels

Trim transparent borders from PNG images automatically. Detects the non-transparent bounding box and crops the image to it.

Vídeo para WebM

Vídeo para WebM ajuda você a converter vídeos comuns para WebM diretamente no navegador. Use para ajustes rápidos e privados, publicações, aulas, demonstrações e edição diária.

apps

Mais ferramentas

Explore nossa colecao completa de ferramentas online gratuitas.

Monte sombras em camadas sem editar CSS longo na mão

Sombras de caixa são fáceis de começar, mas cansam quando você precisa ajustar deslocamento, desfoque, expansão, cor e várias camadas manualmente. Um gerador visual deixa esse processo muito mais rápido e fácil de avaliar.

O que a ferramenta permite testar

Você pode construir desde sombras discretas até efeitos mais marcantes ajustando:

deslocamento horizontal e vertical
raio de desfoque e de expansão
cor e transparência alfa
sombras internas ou externas
várias camadas empilhadas

Quando isso ajuda bastante

Um gerador de box shadow é útil para:

criar estilos de elevação para cartões
montar sombras suaves para componentes modernos
testar sombras internas e efeitos de brilho
produzir CSS reutilizável para um design system

Sombras em múltiplas camadas pedem equilíbrio

Empilhar sombras pode criar profundidade elegante, mas também pode deixar o resultado pesado rapidamente. Depois de encontrar um efeito bom, vale testá-lo em superfícies claras e escuras para garantir que continua limpo.