Gerador de box-shadow CSS
Construa uma box-shadow movendo os controlos e vendo o resultado num cartão. Sobreponha até seis camadas para sombras mais suaves e realistas, use inset para efeitos de pressão e parta de predefinições como suave, flutuante, brilho ou neumorfismo. Copie o CSS com um clique.
Como utilizar
- Escolha uma predefinição ou ajuste o deslocamento, o desfoque, a expansão, a cor e a opacidade da sombra.
- Acrescente camadas com + e selecione cada uma para a editar; mude o fundo, a cor da caixa e o raio dos cantos para combinar com o seu design.
- Copie o CSS e cole-o na regra do elemento.
Perguntas frequentes
O que fazem o desfoque e a expansão?
O desfoque suaviza a borda da sombra; com zero, a borda fica nítida. A expansão aumenta a sombra em todas as direções antes do desfoque, e uma expansão negativa encolhe-a, o que ajuda uma sombra grande e desfocada a ficar por baixo do elemento.
Porquê usar várias camadas de sombra?
As sombras reais são mais escuras junto ao objeto e esbatem-se ao longe. Combinar uma sombra pequena e nítida com outra maior e mais suave imita isso e parece mais natural do que uma única sombra. A primeira camada da lista é desenhada por cima.
A box-shadow torna a página mais lenta?
Não, numa utilização normal. Desfoques muito grandes em muitos elementos, ou animar a própria sombra, podem custar desempenho em telemóveis lentos; para animar, altere antes a opacidade de um pseudoelemento que tenha a sombra.
🏷️ Gerador de meta tags
🖼️ Gerador de Open Graph
🔗 Gerador de links UTM
🌈 Gerador de gradientes CSS