Sombras CSS que parecem naturais
A propriedade box-shadow dá profundidade a cards, botões, modais e menus. Uma sombra bem feita indica o que está em primeiro plano e o que é clicável; uma sombra exagerada deixa a interface pesada. Acertar os valores escrevendo à mão leva tempo, porque cada sombra tem cinco números e uma cor. Este gerador mostra o resultado enquanto você ajusta.
Cada camada tem deslocamento horizontal (X) e vertical (Y), desfoque (blur), expansão (spread), cor, opacidade e a opção inset, que desenha a sombra para dentro da caixa. Você pode empilhar várias camadas: é assim que se obtêm sombras realistas, combinando uma sombra curta e mais escura perto do elemento com outra longa e difusa.
Há predefinições para começar: suave, elevada, nítida, interna e um estilo próximo do neumorfismo. A prévia é desenhada em uma caixa cujas cores de fundo e da própria caixa você pode trocar, para ver a sombra no contexto real do seu design, inclusive em fundos escuros. O resultado sai como uma declaração box-shadow pronta para copiar.
O gerador funciona no seu navegador e é gratuito, sem limites: crie e copie quantas sombras quiser, sem precisar do Pro.
Como criar uma sombra CSS
- Comece com uma predefinição (suave, elevada, nítida, interna ou neumorfismo) ou do zero.
- Ajuste o deslocamento X e Y, o desfoque e a expansão.
- Escolha a cor e a opacidade, e ative inset para uma sombra interna.
- Adicione mais camadas se quiser uma sombra mais realista e mude as cores da prévia.
- Copie o box-shadow e cole no seu CSS.
Onde usar box-shadow
- Cards e painéis com aparência elevada.
- Botões com estado de hover e de clique (inset).
- Modais, menus suspensos e tooltips sobre o conteúdo.
- Campos de formulário com sombra interna.
- Interfaces no estilo neumorfismo.
- Anéis de foco visíveis usando spread sem blur.
Os valores do box-shadow, um por um
- Sintaxe: box-shadow: [inset] X Y blur spread cor;
- X e Y: deslocamento; valores positivos movem a sombra para a direita e para baixo.
- Blur: quanto maior, mais difusa; 0 gera uma borda nítida.
- Spread: aumenta (positivo) ou reduz (negativo) o tamanho da sombra antes do desfoque.
- Inset: desenha a sombra dentro da caixa.
- Várias camadas são separadas por vírgula; a primeira fica por cima.
- Sombras com cor de baixa opacidade parecem mais naturais do que preto puro.
Perguntas Frequentes
O gerador de box-shadow é grátis?
Sim. Os geradores de CSS são gratuitos e sem limites, sem precisar do Pro.
Posso combinar várias sombras?
Sim. Adicione quantas camadas quiser; o CSS gerado as separa por vírgula.
Qual a diferença entre blur e spread?
O blur define quão difusa é a borda da sombra. O spread aumenta ou diminui o tamanho da sombra antes desse desfoque.
Como faço uma sombra interna?
Ative a opção inset na camada. A sombra passa a ser desenhada dentro da caixa.
box-shadow afeta o layout?
Não. A sombra não ocupa espaço nem empurra outros elementos, mas pode ser cortada por um contêiner com overflow: hidden.