Gerador de sombra de caixa CSS
Crie sombras suaves e realistas visualmente em vez de adivinhar os valores dos pixels.
- Seus dados nunca saem do seu dispositivo
- 100% grátis
- Sem cadastro
- Funciona offline após a primeira carga
Como fazer uma sombra de caixa CSS
- Ajuste o deslocamento, o desfoque, a propagação, a cor e a opacidade de cada camada.
- Adicionar, duplicar, ocultar ou reordenar camadas — ou escolha uma predefinição.
- Copie o código CSS, Tailwind ou drop-shadow.
Sobre: Gerador de box-shadow
Crie sombras de caixa CSS visualmente.
Tudo funciona no seu navegador, por isso é instantâneo e privado. Suas cores e configurações recentes são lembradas neste dispositivo, e a barra de endereço mantém sua cor para que você possa compartilhá-la ou marcá-la.
Ideal para
- Cartões, modais e botões
- Material e desenhos neobrutalistas
- Anéis de foco e efeitos de brilho
Dica: Use um azul-cinzento escuro em vez de preto puro para sombras mais suaves e naturais.
Perguntas frequentes
Como faço uma sombra realista?
Empilhe várias camadas suaves que crescem em offset e borrar. Use "sombra em camadas lisas" para construí-las automaticamente ou comece a partir das predefinições suaves flutuantes ou em camadas.
Qual é a diferença entre sombra de caixa e sombra de gota?
box-shadow segue a caixa do elemento; filtro: drop-shadow segue a forma real, por isso se adequa a PNGs transparentes, ícones SVG e texto. Ambos são gerados.
O que o Spread faz?
Spread cresce (positivo) ou encolhe (negativo) a sombra antes de borrar — Uma propagação negativa mantém uma sombra sob o elemento em vez de ao redor dele.
Posso usar várias sombras ao mesmo tempo?
Sim. adicionar camadas — Eles são escritos como uma sombra de caixa separada por vírgula, com a primeira camada desenhada por cima.
A sombra da caixa diminui uma página?
Muito grande borrões em muitos elementos, ou a animação da própria sombra, pode ser caro. — Em vez disso, anima opacidade ou transforma.