Gerador de sombras CSS
Crie box-shadow CSS com visualização em tempo real.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);Gerador de box-shadow CSS: crie sombras com pré-visualização
A propriedade box-shadow do CSS permite adicionar sombras a elementos HTML, criando efeitos de profundidade e elevação que são fundamentais no design moderno. Nosso gerador oferece uma interface visual com controles deslizantes para ajustar cada parâmetro: deslocamento horizontal e vertical, blur (desfoque), spread (expansão) e cor da sombra.
As sombras CSS são essenciais para implementar os princípios de Material Design e outras linguagens de design que usam elevação e camadas. Uma sombra suave e difusa sugere que o elemento flutua sobre a página, enquanto uma sombra nítida e próxima sugere proximidade. A opção inset cria sombras internas, úteis para criar efeitos de profundidade e campos de formulário.
Perguntas frequentes
O que é a propriedade inset?
Inset converte a sombra exterior em uma sombra interior. É útil para criar efeitos de profundidade, campos de texto rebaixados ou botões pressionados.
As sombras afetam o desempenho?
Sombras simples têm impacto mínimo. No entanto, sombras com blur muito alto em muitos elementos podem afetar o desempenho em dispositivos lentos. Use com moderação.
Posso usar múltiplas sombras?
Sim, separe-as com vírgulas: box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05). Isso cria efeitos mais realistas e sofisticados.
Quer saber mais? Leia nosso guia completo →