Gerador de box-shadow CSS
Crie sombras CSS com várias camadas, sombra interna e prévia ao vivo, e copie o código pronto.
Sugestões
Processado no seu dispositivo. Nada do que você digita é enviado.
Como usar: gerador de box-shadow css
- Ajuste deslocamento horizontal e vertical, desfoque, espalhamento, cor e opacidade de cada sombra.
- Adicione mais camadas para sombras realistas ou escolha um dos modelos prontos.
- Copie a linha
box-shadowe cole no seu CSS.
Sobre esta ferramenta
A propriedade box-shadow recebe, na ordem: deslocamento X, deslocamento Y, desfoque, espalhamento e cor — com inset opcional para sombras internas. Vários valores separados por vírgula se sobrepõem, e é aí que estão as sombras mais naturais: uma camada curta e definida somada a outra longa e suave imita a luz real.
Prefira cores pretas com baixa opacidade (10% a 25%) em vez de cinzas sólidos: a sombra se adapta a qualquer fundo. Espalhamento negativo concentra a sombra embaixo do elemento, efeito comum em cartões e botões flutuantes.
Perguntas frequentes
Qual a diferença entre box-shadow e drop-shadow?
box-shadow segue o retângulo (e o border-radius) do elemento. O filtro drop-shadow segue o formato real do conteúdo, incluindo áreas transparentes de PNGs e SVGs.
Sombras deixam o site lento?
Sombras estáticas têm custo baixo. Evite animar box-shadow diretamente; para efeitos de hover, anime a opacidade de um pseudo-elemento com a sombra.
É grátis mesmo? Existe limite diário?
É grátis e sem limite diário. Como o processamento acontece no seu aparelho, não temos custo por uso e não precisamos limitar você.
Funciona no celular?
Sim. O site funciona em qualquer navegador moderno no Android, iPhone, Windows, Mac e Linux, sem instalar nada.