Os resultados são fornecidos apenas para fins informativos e podem conter erros. Verifique de forma independente as informações importantes. O uso desta ferramenta é por sua conta e risco.
O que esta ferramenta faz
O Gerador de Sombras CSS monta um box-shadow com sliders para o deslocamento horizontal, o deslocamento vertical, o desfoque, a expansão, a cor e a opacidade. A caixa de pré-visualização é atualizada enquanto você arrasta, e a linha de resultado fica pronta para copiar. Ele abre com uma sombra suave 10px abaixo da caixa, 20px de desfoque e preto a 25%.
Os quatro comprimentos são escritos na ordem do CSS: deslocamento x, deslocamento y, raio de desfoque, raio de expansão. Deslocamentos positivos movem a sombra para a direita e para baixo; valores negativos, para a esquerda e para cima. O desfoque suaviza a borda, e a expansão aumenta ou diminui a sombra antes do desfoque. A cor é escrita como rgba(), então a opacidade já vem embutida e a sombra se mistura com qualquer fundo.
Quando usar
- Dar profundidade a cards, modais e dropdowns em um flat design.
- Reproduzir os níveis de elevação de um design system como o Material Design.
- Adicionar um efeito sutil de foco ou de hover a botões.
- Criar um brilho colorido usando deslocamento zero e uma cor viva.
Exemplo prático
Entrada
X 0, Y 10, desfoque 20, expansão 0, cor #000000, opacidade 25%Saída
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);Perguntas sobre esta ferramenta
Como faço uma sombra interna?
Adicione a palavra-chave inset no início do valor: box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);. A sombra passa a ser desenhada dentro da caixa, o que combina com botões pressionados e campos de entrada.
Posso combinar várias sombras?
Sim, separe-as com vírgulas. Uma elevação realista costuma usar duas: uma sombra pequena e nítida para a borda e uma grande e suave para a profundidade, por exemplo 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12).
Por que minha sombra fica cinza e suja sobre um fundo colorido?
Preto puro com baixa opacidade dessatura as cores que estão por baixo. Para um resultado mais limpo, use um tom mais escuro da cor de fundo em vez de preto.
Sombras deixam a página mais lenta?
Sombras estáticas custam pouco. Animar uma sombra grande e desfocada pode derrubar frames em dispositivos lentos; nesse caso, anime a opacity de um pseudo-elemento que carrega a sombra.
Esta ferramenta é gratuita?
Sim, é grátis. Sem cadastro nem e-mail. Veja o resultado nesta página.
Como recebo o resultado?
Use a ferramenta nesta página. O resultado aparece aqui, sem envio por e-mail.