Gerador de box-shadow CSS
Ajuste uma sombra de caixa com controles deslizantes e prévia ao vivo, e depois copie o CSS. A opção em camadas acrescenta uma sombra de contato sutil, que deixa o resultado mais natural e atual.
Não precisa de dados
Como usar
- Ajuste o deslocamento, o desfoque, a expansão e a opacidade.
- Escolha a cor da sombra.
- Ligue ou desligue as sombras inset e em camadas.
- Copie o CSS.
Como funciona
O box-shadow recebe um deslocamento horizontal e um vertical, um raio de desfoque, um raio de expansão e uma cor. Uma expansão negativa encolhe a sombra, o que evita aquele “halo” pesado. Colocar uma sombra pequena e pouco opaca embaixo de outra maior e mais suave imita o jeito como a luz real cria ao mesmo tempo uma sombra de contato e uma sombra ambiente.
Exemplos
- Card
- 0px 12px 32px -8px rgba(15, 23, 42, 0.25)
Usos comuns
- Cards, modais e menus suspensos
- Botões e estados de hover
- Design systems
Privacidade e segurança
Esta ferramenta não pede nenhum dado pessoal nem nenhum arquivo. Os resultados são gerados no seu dispositivo. Como cada ferramenta trata os arquivos
Perguntas frequentes
O box-shadow pesa no desempenho?
Sombras grandes e desfocadas podem custar caro quando animadas. Anime a opacidade de um pseudoelemento em vez da própria sombra.
Dá para aplicar em texto?
Para texto, use text-shadow; ele não tem valor de expansão.
Última atualização: