Como criar uma sombra CSS
- Comece por um dos modelos ou ajuste os controles da camada.
- Adicione camadas para uma sombra mais realista.
- Teste com as cores do seu layout e copie o CSS ou a classe Tailwind.
Dicas
- Sombras com opacidade entre 5% e 15% parecem mais naturais que sombras pretas fortes.
- Use a mesma direção de luz em todo o site (normalmente de cima para baixo).
- Quanto mais “elevado” o elemento (modais, menus), maior o desfoque e o deslocamento.
Perguntas frequentes
Como funciona o box-shadow?
Cada sombra tem deslocamento horizontal e vertical, desfoque, expansão e cor. Valores negativos de expansão deixam a sombra menor que o elemento, o que dá um ar mais natural.
Por que usar várias camadas?
Sombras reais têm uma parte curta e escura perto do objeto e outra longa e clara mais distante. Empilhar camadas com opacidade baixa imita isso e deixa a sombra muito mais realista.
O que é sombra inset?
É uma sombra desenhada para dentro do elemento, dando a impressão de que ele está afundado. É comum em campos de formulário e no estilo neumórfico.