Gerador de Box Shadow
O Gerador de Box Shadow permite criar sombras CSS visualmente com suporte multi-camadas, 12 presets integrados (incluindo Neumorfismo, Neon, Sharp, Layered), controles por camada para offset, blur, spread, cor, opacidade e inset, preview em tempo real com alternância claro/escuro, e gera tanto CSS padrão quanto Tailwind CSS. Sem cadastro.
Configurações da Camada #1
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
shadow-md
Tem uma sugestão?
Solicite uma nova ferramenta ou sugira melhorias — junte-se à nossa comunidade no Slack!
O que é um Gerador de Box Shadow?
Um Gerador de Box Shadow é uma ferramenta visual que ajuda a criar efeitos CSS box-shadow sem escrever código manualmente. A propriedade box-shadow adiciona efeitos de sombra ao redor de um elemento, criando profundidade e dimensão no design web. Esta ferramenta oferece edição multi-camadas com 12 presets integrados incluindo estilos populares como Neumorfismo, brilho Neon e bordas Sharp.
Como Usar o Gerador de Box Shadow
- Escolha um preset para começar ou inicie com a camada de sombra padrão
- Ajuste as propriedades usando sliders: Offset X/Y, Blur, Spread e Opacidade
- Escolha uma cor de sombra usando o seletor de cores e ative Inset se necessário
- Adicione múltiplas camadas para efeitos complexos usando o botão Adicionar Camada
- Alterne entre fundos claro e escuro para testar a aparência da sombra
- Copie o código CSS ou Tailwind CSS gerado para usar no seu projeto
Perguntas Frequentes
O que é CSS box-shadow?
CSS box-shadow adiciona efeitos de sombra ao redor de um elemento. Aceita valores para offset horizontal, offset vertical, raio de blur, raio de spread, cor e uma palavra-chave inset opcional.
Como criar um efeito Neumorfismo?
Neumorfismo usa duas sombras: uma sombra escura em uma direção e uma sombra clara na direção oposta, criando um efeito elevado. Use o preset Neumorfismo como ponto de partida.
Posso usar múltiplas camadas de sombra?
Sim. Esta ferramenta suporta camadas ilimitadas que você pode adicionar, remover e reordenar. Cada camada tem controles independentes para offset, blur, spread, cor, opacidade e inset.
Gera classes Tailwind CSS?
Sim. A ferramenta gera tanto código CSS box-shadow padrão quanto classes Tailwind CSS. Para sombras simples, gera classes como shadow-md. Para sombras personalizadas, gera sintaxe de valor arbitrário.
Meus dados estão seguros?
Sim. Toda geração de sombras acontece 100% no seu navegador. Nenhum dado é enviado para qualquer servidor.