🌑 Dev

Gerador de Sombra CSS

Crie sombras CSS (box-shadow) com prévia em tempo real. Configure múltiplas camadas de sombra, cor, desfoque, expansão e inset. Copie o código CSS.

Elemento de exemplo

box-shadow

Como usar?

Mexa nos parâmetros de cada camada de sombra e o resultado aparece em tempo real. Combinar várias camadas rende efeitos mais elaborados. Se você ligar a opção inset, a sombra passa a ser interna, com aspecto de recorte.

Crie sombras CSS com prévia ao vivo

A propriedade box-shadow dá relevo a cartões, botões e caixas. Acertar os valores na mão, porém, vira um exercício de tentativa e erro, entre deslocamento, desfoque e expansão. Aqui o gerador mostra a sombra mudando em tempo real à medida que você mexe em cada parâmetro.

Você controla cor, desfoque, expansão e deslocamento, liga ou desliga o modo inset (a sombra interna) e ainda empilha várias camadas quando quer um efeito mais elaborado. Quando o resultado chega no ponto que você queria, um clique copia o código CSS pronto para colar no projeto.

Tudo acontece no navegador. É uma ferramenta direta para designers e desenvolvedores darem profundidade à interface sem ter de decorar a sintaxe da propriedade.

Perguntas frequentes

Por que o CSS copiado sai em rgba se eu escolhi a cor no seletor hexadecimal?

Porque cor e opacidade são dois controles separados aqui. O seletor devolve só o valor hexadecimal, e o deslizante de opacidade define o canal alfa; na hora de montar o código os dois viram uma única função rgba. A página abre com preto a 15%, o que resulta em rgba(0,0,0,0.15). Se preferir manter o hexadecimal, troque à mão depois de copiar: a propriedade box-shadow aceita hex normalmente, mas aí o controle de opacidade deixa de ter efeito.

Quantas camadas de sombra dá para empilhar?

Quatro, no máximo. O botão de adicionar camada desaparece assim que a lista chega a quatro sombras. Cada camada guarda seus próprios valores de horizontal, vertical, desfoque, expansão, cor, opacidade e inset, e todas saem em um único box-shadow, separadas por vírgula, na ordem em que aparecem na tela — a primeira da lista é desenhada por cima das outras. Se precisar de uma quinta, acrescente à mão no código já copiado.

Até onde vão os controles deslizantes de cada camada?

O deslocamento horizontal e o vertical vão de -50 a 50 pixels, o desfoque de 0 a 80, a expansão de -20 a 40 e a opacidade de 0 a 100%. A camada inicial já vem com 4 px de deslocamento nos dois eixos, 12 px de desfoque e preto a 15% — discreta de propósito, que é o que costuma funcionar em cartão e botão. Valores fora dessas faixas continuam válidos em CSS: é só editar o número no código copiado.

Ferramentas Relacionadas

🌈

Gerador de Gradiente CSS

Crie gradientes lineares e radiais para CSS com prévia em tempo real. Ajuste cores, posições e ângulo. Copie o código CSS com um clique.

🟢

Gerador de Neumorphism CSS

Crie efeitos Soft UI (neumorphism) com dois box-shadows complementares. Ajuste cor de base, distância, blur e tipo (extrudido, plano, pressionado). Cópia em CSS pronto. Tudo no navegador.

🪟

Gerador de Glassmorphism CSS

Crie efeitos de vidro fosco (glassmorphism) com backdrop-filter, transparência e bordas. Ajuste blur, saturação e opacidade. Veja o preview em tempo real e copie o CSS. Tudo no navegador.

🔘

Gerador de Botão CSS

Crie botões CSS customizados: cor, texto, padding, border-radius, sombra e hover. Veja o preview em tempo real e copie o HTML+CSS pronto para colar no projeto. Tudo no navegador.

🎨

Gerador de Mesh Gradient

Crie mesh gradients modernos combinando vários radial-gradients. Adicione, remova e arraste pontos para compor fundos vibrantes ao estilo Stripe e Linear. Tudo no navegador.

🌬️

Gerador Tailwind Config (CLI)

Gere um tailwind.config.js pronto para usar com a Tailwind CLI, com paths de conteúdo e tema configurados. Copie e comece a estilizar em segundos.