Por que várias camadas de sombra?

Sombras reais nunca são um bloco difuso único. O sistema de elevação do Material empilha 2-3 sombras: uma densa, escura e pouco espalhada perto da borda, mais outra mais ampla e clara afastada. A primeira camada pinta em cima, a última no fundo - use os botões de subir/descer para reordenar.

Para que serve inset?

Uma sombra inset é pintada dentro do padding-box do elemento, e não fora. É assim que se obtêm botões pressionados, inputs rebaixados ou efeitos de sombra interna. Sombras inset ficam acima do fundo mas abaixo do conteúdo, e não empurram a borda para fora.

Como faço uma sombra neumórfica?

Neumorfismo usa duas sombras opostas sobre um fundo levemente colorido: uma sombra escura no canto inferior direito (`8px 8px 16px rgba(0,0,0,0.10)`) e um brilho claro no superior esquerdo (`-8px -8px 16px rgba(255,255,255,0.85)`). A predefinição Neumorfismo carrega essa pilha pronta para ajustar. O efeito precisa de superfície levemente cinza ou colorida - no branco puro o brilho some.

Por que minha box-shadow não aparece?

Três suspeitos comuns. (1) Um pai tem `overflow: hidden` e está cortando a sombra. (2) O elemento é inline - box-shadow precisa de block, inline-block ou flex item para renderizar. (3) O elemento não tem fundo, então uma sombra inset fica invisível por não haver superfície para pintar.

Qual a diferença entre desfoque e espalhamento?

Desfoque suaviza a borda da sombra - mais desfoque = degradê mais largo. Espalhamento aumenta ou reduz a sombra antes do desfoque - positivo deixa a sombra maior que o elemento, negativo a deixa menor (útil para sombras que 'erguem' o elemento ficando mais estreitas).

box-shadow ou filter: drop-shadow?

Use `box-shadow` para caixas retangulares - é mais barato de renderizar e suporta multi-camada + inset. Use `filter: drop-shadow()` para formas não retangulares como PNGs com transparência ou SVGs, porque segue o canal alfa em vez da bounding box. Não são intercambiáveis quando a forma não é um retângulo.

Quantas camadas de sombra é demais?

Passando de 4-5 camadas você para de ganhar profundidade visível e começa a pagar custo de composição. O sistema de elevação do Material para em 3 camadas por nível por essa razão. Se você está empilhando mais, os valores provavelmente brigam entre si - tente dobrar o espalhamento de uma camada.

Gerador de Box-Shadow CSS

Empilhe várias sombras CSS com predefinições, pré-visualização ao vivo e declaração pronta para colar.

Roda no seu navegador

Empilhe quantas camadas precisar. Cada camada: offset X / Y, desfoque, espalhamento, cor hex com slider de opacidade, toggle inset, além de reordenar e silenciar. Comece em uma predefinição (elevação Material 1-16, neumorfismo, anel de foco, sombra longa, brilho) ou monte do zero. A pré-visualização alterna entre fundo claro e escuro e muda a forma (arredondado, pílula, círculo) - design de sombra depende do fundo, então dá para conferir as duas superfícies antes de subir.

Predefinições

Camadas de sombra

Desfoque

Espalhamento

Opacidade: 10%

Interna

Desfoque

Espalhamento

Opacidade: 10%

Interna

CSS

box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.10), 0px 4px 16px 0px rgba(0,0,0,0.10);

Pré-visualização

Como usar

Escolha uma predefinição
Elevação Material 1-16, neumorfismo, anel de foco, sombra longa, brilho - um clique carrega as camadas.
Ajuste as camadas
Sliders de offset X / Y, desfoque, espalhamento + seletor hex com opacidade separada. Os números atualizam ao arrastar.
Reordene ou silencie
Os botões para cima/baixo mudam a ordem de pintura (a primeira = em cima). O olho silencia uma camada sem perder os valores.
Pré-visualize as duas superfícies
Alterne fundo claro/escuro e forma arredondado/pílula/círculo - o design depende do fundo.
Copie o CSS
A declaração `box-shadow:` completa está pronta para colar na sua folha de estilos.

O que é?

Um gerador de box-shadow constrói a declaração `box-shadow:` a partir de uma lista de camadas. Sintaxe completa por camada: `[inset?] <offset-x> <offset-y> <desfoque> <espalhamento> <cor>`, várias camadas separadas por vírgula. Os navegadores pintam da frente para trás na ordem declarada - a primeira camada fica em cima. Offsets negativos: sombra para cima e para a esquerda; positivos: para baixo e para a direita (convenção de coordenadas de tela).

Quando usar

Sistemas de elevação de cards (Material, iOS, design systems próprios), anéis de foco para acessibilidade, formas neumórficas, inputs em relevo, drop-shadows em ícones dentro de cards, feedback hover/press, popovers e tooltips, overlays de modal. Onde você iria ao Photoshop para fingir profundidade, o CSS box-shadow faz nativamente, anima bem e respeita transparência.

Erros comuns

Sombras totalmente opacas - parecem contornos grossos. Espalhamento maior que desfoque - anel duro em vez de degradê suave. Esquecer que sombras inset são pintadas dentro do padding-box, não por cima da borda. Escolher valores perfeitos no branco que quebram no modo escuro (a pré-visualização escura aqui evita isso). E aplicar box-shadow em elemento inline sem mudar o display - nada acontece.

FAQ

Por que várias camadas de sombra?: Sombras reais nunca são um bloco difuso único. O sistema de elevação do Material empilha 2-3 sombras: uma densa, escura e pouco espalhada perto da borda, mais outra mais ampla e clara afastada. A primeira camada pinta em cima, a última no fundo - use os botões de subir/descer para reordenar.
Para que serve inset?: Uma sombra inset é pintada dentro do padding-box do elemento, e não fora. É assim que se obtêm botões pressionados, inputs rebaixados ou efeitos de sombra interna. Sombras inset ficam acima do fundo mas abaixo do conteúdo, e não empurram a borda para fora.
Como faço uma sombra neumórfica?: Neumorfismo usa duas sombras opostas sobre um fundo levemente colorido: uma sombra escura no canto inferior direito (`8px 8px 16px rgba(0,0,0,0.10)`) e um brilho claro no superior esquerdo (`-8px -8px 16px rgba(255,255,255,0.85)`). A predefinição Neumorfismo carrega essa pilha pronta para ajustar. O efeito precisa de superfície levemente cinza ou colorida - no branco puro o brilho some.
Por que minha box-shadow não aparece?: Três suspeitos comuns. (1) Um pai tem `overflow: hidden` e está cortando a sombra. (2) O elemento é inline - box-shadow precisa de block, inline-block ou flex item para renderizar. (3) O elemento não tem fundo, então uma sombra inset fica invisível por não haver superfície para pintar.
Qual a diferença entre desfoque e espalhamento?: Desfoque suaviza a borda da sombra - mais desfoque = degradê mais largo. Espalhamento aumenta ou reduz a sombra antes do desfoque - positivo deixa a sombra maior que o elemento, negativo a deixa menor (útil para sombras que 'erguem' o elemento ficando mais estreitas).
box-shadow ou filter: drop-shadow?: Use `box-shadow` para caixas retangulares - é mais barato de renderizar e suporta multi-camada + inset. Use `filter: drop-shadow()` para formas não retangulares como PNGs com transparência ou SVGs, porque segue o canal alfa em vez da bounding box. Não são intercambiáveis quando a forma não é um retângulo.
Quantas camadas de sombra é demais?: Passando de 4-5 camadas você para de ganhar profundidade visível e começa a pagar custo de composição. O sistema de elevação do Material para em 3 camadas por nível por essa razão. Se você está empilhando mais, os valores provavelmente brigam entre si - tente dobrar o espalhamento de uma camada.