Gerador de sombras CSS (box-shadow)
Crie sombras CSS visualmente com várias camadas, sombras internas, desfoque, espalhamento e cor. Prévia ao vivo e exportação em CSS, SCSS ou Tailwind.
Carregando Gerador de box-shadow CSS…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de box-shadow CSS
- 1
Abra Gerador de box-shadow CSS nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
A propriedade CSS box-shadow dá profundidade a cards, botões e imagens, mas escrever os valores à mão é pura adivinhação. Este gerador de box-shadow permite desenhar a sombra com controles deslizantes e vê-la em uma caixa de prévia ao vivo, e depois copiar um código limpo em CSS, SCSS ou como entrada de configuração do Tailwind.
Como criar uma sombra
- Ajuste o deslocamento horizontal e vertical para mover a sombra.
- Aumente o desfoque para uma borda mais suave e ajuste o espalhamento para aumentar ou diminuir a sombra.
- Escolha a cor e a opacidade.
- Marque inset para colocar a sombra dentro da caixa.
- Adicione mais camadas, duplique ou exclua, e ligue ou desligue cada uma.
- Mude a cor da caixa e o fundo da prévia para combinar com o seu design e copie o código.
Sintaxe do box-shadow
box-shadow: [inset] offset-x offset-y blur spread color;
Por exemplo box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15); cria uma sombra suave logo abaixo do elemento. Várias sombras podem ser combinadas, separadas por vírgulas, e a primeira é desenhada por cima.
Receitas de sombra
- Card suave: deslocamento pequeno, desfoque grande e opacidade baixa, como 0 4px 12px com preto a 10 a 15 por cento.
- Profundidade realista: duas camadas, uma mais escura e justa perto do elemento e outra larga e bem clara mais distante.
- Botão pressionado: uma sombra interna na borda superior.
- Brilho ou neon: deslocamento zero, desfoque grande e sombra de cor viva; empilhe duas cores para mais intensidade.
- Sombra concentrada: um espalhamento negativo deixa a sombra mais estreita que a caixa, para aparecer só embaixo.
Dicas
- Mantenha uma única direção de luz em toda a interface, geralmente de cima, para que todas as sombras apontem para o mesmo lado.
- Tinja as sombras com uma versão escura da cor de fundo em vez de preto puro, para um visual mais natural.
- Fique de olho no desempenho: desfoques muito grandes em muitos elementos podem deixar a rolagem lenta em celulares antigos.
Combine sombras com cantos arredondados do gerador de border-radius e fundos do gerador de gradiente CSS.
Perguntas frequentes
O que significam os valores do box-shadow?
Na ordem: deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de espalhamento e cor. Coloque a palavra inset no início para desenhar a sombra dentro do elemento.
Como adicionar mais de uma sombra?
Adicione outra camada no gerador. No CSS, várias sombras são escritas em uma única propriedade box-shadow, separadas por vírgulas.
O que é uma sombra inset?
Uma sombra desenhada dentro da borda do elemento em vez de fora, muito usada em botões pressionados e campos de formulário.
Posso ter a sombra como classe do Tailwind?
Sim. A exportação Tailwind gera uma entrada boxShadow para o tailwind.config.js, para usar a sombra como classe personalizada, como shadow-custom.
O que faz um espalhamento negativo?
Deixa a sombra menor que o elemento, de modo que ela aparece só do lado do deslocamento, criando uma sombra mais justa e concentrada.
Por que minha sombra está escura demais?
Reduza a opacidade, aumente o desfoque ou use um tom escuro da cor de fundo em vez de preto puro.