Gerador de sombra CSS (box-shadow)
Monte um box-shadow mexendo nos controles e vendo o resultado num cartão. Empilhe até seis camadas para sombras mais suaves e realistas, use a sombra interna para efeitos de botão pressionado e comece por modelos como suave, flutuante, brilho ou neumorfismo. Copie o CSS com um clique.
Como usar
- Escolha um modelo ou ajuste deslocamento, desfoque, expansão, cor e opacidade da sombra.
- Adicione camadas com + e selecione cada uma para editar; mude o fundo, a cor da caixa e o arredondamento para combinar com o seu design.
- Copie o CSS e cole na regra do elemento.
Perguntas frequentes
O que fazem o desfoque e a expansão?
O desfoque deixa a borda da sombra mais suave; zero dá uma borda dura. A expansão aumenta a sombra em todas as direções antes do desfoque, e uma expansão negativa a encolhe, o que ajuda uma sombra grande e desfocada a ficar embaixo do elemento.
Por que usar várias camadas de sombra?
Sombras reais são mais escuras perto do objeto e se apagam mais longe. Combinar uma sombra pequena e nítida com outra maior e suave imita isso e fica mais natural do que uma sombra só. A primeira camada da lista é desenhada por cima.
O box-shadow deixa a página lenta?
Não no uso normal. Desfoques muito grandes em muitos elementos, ou animar a própria sombra, podem pesar em celulares lentos; para animar, mude a opacidade de um pseudo-elemento que tenha a sombra.
🏷️ Gerador de meta tags
🖼️ Gerador de Open Graph
🔗 Gerador de UTM
🌈 Gerador de gradiente CSS