Gerador de Sombra de Caixa CSS: Crie Sombras de Caixa Visualmente
Precisa adicionar profundidade ou elevação a um cartão, botão ou painel? O CSS Box Shadow Generator permite que você crie valores de box-shadow visualmente: defina deslocamento, desfoque, espalhamento, cor e opcionalmente inseto, adicione múltiplas sombras e copie o CSS com um clique.
Exemplo: Escolha o preset "Soft" para uma sombra sutil, ou "Layered" para uma profundidade mais realista. Ajuste o deslocamento e o desfoque com os controles deslizantes, escolha uma cor (incluindo transparência) e use "Inset" para um visual pressionado ou rebaixado. A pré-visualização é atualizada à medida que você altera os valores. Copie o CSS e cole-o em sua folha de estilo.
O que é box-shadow?
box-shadow é uma propriedade CSS que desenha uma ou mais sombras atrás (ou dentro) de um elemento. Você controla o deslocamento horizontal e vertical, o raio de desfoque, o espalhamento, a cor e se a sombra é inset. As sombras de caixa adicionam profundidade e separação sem marcação extra ou imagens, e funcionam em todos os navegadores modernos.
Por que usar um gerador de sombras de caixa?
Iteração mais rápida — Ajuste deslocamento, desfoque e cor com controles em vez de editar CSS bruto manualmente.
Feedback visual — Veja a sombra em uma caixa de pré-visualização para obter o visual desejado antes de copiar o código.
Múltiplas sombras — Empilhe várias sombras (por exemplo, uma sombra ambiente suave mais uma mais nítida) e copie uma única declaração de box-shadow.
Presets — Comece com Soft, Medium, Hard, Inset ou Layered e ajuste a partir daí.
Sem cadastro — Grátis, do lado do cliente, e funciona offline uma vez que a página é carregada.
Como a ferramenta funciona
- Use a pré-visualização para ver a sombra atual (e opcionalmente mudar o fundo da pré-visualização).
- Edite cada sombra: deslocamento X/Y, desfoque, espalhamento, cor (seletor ou hex/rgba) e Inset.
- Adicione ou remova sombras para criar efeitos em camadas.
- Copie o CSS da saída e cole-o em seu projeto.
- Experimente presets (Soft, Medium, Hard, Inset, Layered) para iniciar um estilo.
Sintaxe: box-shadow: offset-x offset-y blur-radius spread-radius color [inset]; Múltiplas sombras são separadas por vírgulas.
Casos de Uso
Cartões e painéis — Sombras suaves para levantar o conteúdo da página.
Botões — Profundidade sutil por padrão, ou inseto para um estado pressionado.
Modais e dropdowns — Sombras em camadas para elevação e separação do fundo.
Imagens — Uma sombra leve para emoldurar ou flutuar imagens.
Perguntas Frequentes
O que é inset?
Uma sombra de caixa inset é desenhada dentro da caixa de borda do elemento, como um efeito rebaixado ou pressionado. Use-a para entradas, botões pressionados ou painéis afundados.
Posso usar múltiplas sombras?
Sim. Adicione mais sombras com "Add shadow." Elas se empilham em ordem; a primeira fica em cima. Combine múltiplas sombras para profundidade em camadas ou misture inset e outset.
Experimente o CSS Box Shadow Generator
CSS Box Shadow Generator
Generate CSS box-shadow values visually. Set offset, blur, spread, color, and inset. Add multiple shadows and copy the CSS instantly.
The CSS Box Shadow Generator is free, works in your browser, and requires no sign-up. Adjust offset, blur, spread, color, and inset, add multiple shadows if you like, and copy the CSS with one click — perfect for cards, buttons, and UI depth.
Related Tools
- Gradient Generator — Create linear, radial, and conic CSS gradients
- Color Contrast Checker — Check contrast ratios for accessibility
- Color Shades Generator — Generate lighter and darker shades from a base color
- Font Pairing — Preview and test typography combinations