Gerador de box-shadow CSS
Crie sombras CSS (box-shadow) com prévia ao vivo: deslocamento, desfoque, espalhamento, cor, opacidade, várias camadas e modelos prontos.
Como usarGerador de sombra CSS
Disponível em: 
Gerador de box-shadow CSS: para que serve
Ajuste deslocamento, desfoque, espalhamento, cor e opacidade da sombra e veja o resultado na hora. Combine várias camadas para sombras realistas e use a opção interna (inset).
Tem modelos prontos como suave em camadas, Material, flutuando, contorno, neumorfismo e neon. O código CSS fica pronto para copiar, já com o border-radius.
Como usar
- Escolha um modelo ou comece do zero.
- Ajuste as camadas e as cores.
- Copie o CSS.
Quando usar
- Dar profundidade a cards e botões.
- Criar efeitos de neumorfismo e neon.
- Aprender como o box-shadow funciona.
Perguntas frequentes
Como fazer uma sombra suave e realista?
Use várias camadas com pouca opacidade: uma curta e nítida e outra longa e desfocada. O modelo 'Suave em camadas' já faz isso.
O que é sombra interna (inset)?
É a sombra desenhada dentro do elemento, dando a impressão de que ele está afundado. Marque a opção 'Interna' na camada.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.