Português
Desenhe box-shadow CSS multicamadas com preview ao vivo e copie CSS pronto pra produção.
Última atualização
box-shadow:
0px 8px 24px 0px rgba(0, 0, 0, 0.18);box-shadow é a propriedade do CSS que adiciona sombras, brilhos e poços internos a qualquer elemento. É a maior alavanca para dar *elevação* a um design plano - cards descolam da página, modais flutuam, botões parecem clicáveis.
O detalhe é que uma sombra *boa* quase nunca é só uma camada. Sombras reais são mais macias e têm rebatida ambiente - a maioria dos design systems (Material, iOS, Tailwind) empilham 2–3 declarações box-shadow com offsets e opacidades distintos. Escrever isso na mão é chato; um gerador deixa você ajustar cada camada visualmente e ver o resultado combinado ao vivo.
O gerador do Coddy suporta camadas ilimitadas, sombras *externas* e *inset*, cor e opacidade por camada e presets para os padrões mais comuns: cards sutis, drops nítidos, brilhos de marca, poços inset e superfícies neumórficas. Copie o CSS e cole na sua folha de estilos - sem upload, sem conta, sem marca d'água.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset coloca a sombra *dentro* do elemento; sem ele ela cai pra fora.Escolha o preset mais próximo do que você quer - card sutil, elevação suave, drop nítido, brilho de marca, poço inset ou neumórfico. São bons pontos de partida pra refinar.
Mexa nos sliders de X/Y, blur, spread, cor e opacidade. O preview à esquerda atualiza ao vivo. Opacidade menor + blur maior leem como sombras mais *macias*.
Clique em *Adicionar camada* pra empilhar uma segunda sombra. Profundidade real quase sempre usa duas camadas: uma curta e fechada (sombra de contato) e outra longa e suave (sombra ambiente).
Ligar *Inset* pinta a sombra dentro do elemento. Combine com uma sombra externa sutil pra efeito de botão pressionado.
Quando o preview combinar com seu design, clique em *Copiar CSS*. Cole na sua folha de estilos - a regra gerada inclui todas as camadas ativas.
Cada valor de box-shadow: x y blur spread color e o papel que ele cumpre.
| Valor | Efeito | Faixa típica |
|---|---|---|
| X offset | Desloca a sombra na horizontal; positivo = direita | −40px a 40px |
| Y offset | Desloca a sombra na vertical; positivo = baixo | 0 a 40px pra luz natural |
| Blur | Amacia a borda da sombra | 0 a 80px |
| Spread | Engrossa ou afina antes do blur | −30 a 30px |
| Color | Qualquer cor CSS; rgba() deixa ajustar opacidade por camada | rgba(0,0,0,0.05–0.3) pra sombras naturais |
inset | Pinta a sombra dentro do elemento | - |
| Várias camadas | Separadas por vírgula; empilham de trás pra frente | 2–3 camadas dão profundidade real |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);Uma sombra curta e fechada define o ponto de contato, e outra mais longa e macia dá a impressão de luz ambiente. É o padrão usado pela maioria dos design systems modernos.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);Coloque X e Y em zero pra o brilho irradiar uniformemente. Um spread positivo pequeno engrossa o glow antes de o blur amaciar. Use com moderação - glows coloridos chamam muita atenção.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Sombras inset pintam dentro do elemento. Uma sombra macia dá impressão de poço afundado; um inset de um pixel adiciona um contorno interno sutil pra definir.
box-shadow significa?box-shadow: x y blur spread color. Os dois primeiros são offsets; *blur* amacia a borda; *spread* muda o tamanho antes do blur; a cor é qualquer cor CSS (use rgba() pra opacidade). Adicione inset no começo pra deixar a sombra interna.box-shadow e filter: drop-shadow()?box-shadow segue o retângulo do elemento e é rápida de pintar. drop-shadow() segue o canal alpha do que está aplicado (ótima pra SVGs e PNGs transparentes) mas custa mais. Use box-shadow pra cards e botões; drop-shadow() pra formas irregulares.transform: scale() em algum ancestral.box-shadow afeta o layout?overflow: visible.