Gerador de sombras CSS

Crie sombras CSS e efeitos de brilho com até cinco camadas. Ajuste o deslocamento, o desfoque, a dispersão, a cor e a opacidade de cada camada, incluindo sombras internas. Copie o CSS ou as classes Tailwind, ou baixe um PNG. Comece com uma das cinco predefinições e ajuste o resultado ao seu projeto.

Só local

Predefinições

Escolha uma predefinição para ajustar todos os controles de uma vez e depois refine.

Cor de fundo

Raio16pxFundo escuroUma sombra só faz sentido sobre um fundo, então teste o par nos dois. Uma sombra ajustada no branco desaparece por completo numa superfície quase preta, e vice-versa.

Camadas

Camada 1

Cor 1

Deslocamento X0pxDeslocamento Y1pxDesfoque3pxDispersão0pxOpacidade0.18

Camada 2

Cor 2

Deslocamento X0pxDeslocamento Y12pxDesfoque28pxDispersão-6pxOpacidade0.14

Uma predefinição ajusta todos os controles com um clique; Aleatório faz o mesmo com valores sorteados.

CSS

.box {
  border-radius: 16px;
  box-shadow:
    0px 1px 3px 0px rgb(11 11 18 / 0.18),
    0px 12px 28px -6px rgb(11 11 18 / 0.14);
}

Sombras em camadas são o que dá profundidade a uma interface real: uma sombra curta e escura para a borda de contato e outra ampla e suave para a elevação ambiente. Uma única sombra grande parece um borrão ao redor da caixa, não luz.

Classes do Tailwind

rounded-[16px] shadow-[0px_1px_3px_0px_rgb(11_11_18_/_0.18),0px_12px_28px_-6px_rgb(11_11_18_/_0.14)]

Valores arbitrários, então cada número é exato — nenhum é arredondado para o passo de escala mais próximo.

Como funciona o Gerador de sombras CSS?

Cada camada de `box-shadow` reúne deslocamento horizontal e vertical, desfoque, expansão, cor e opacidade. Você pode combinar uma sombra curta de contato com uma sombra mais ampla ou usar uma cor clara para criar um brilho.

A expansão é aplicada antes do desfoque: valores positivos aumentam a sombra, e negativos a reduzem. A primeira sombra da lista CSS fica à frente das demais. A prévia mantém essa mesma ordem.

A opção `inset` cria uma sombra interna. A prévia SVG usa filtros e máscaras para representar sombras internas e externas, inclusive valores negativos de expansão. O PNG é renderizado dessa mesma prévia e inclui as sombras internas.

Sombras não reservam espaço no layout, mas podem ser recortadas por um contêiner. Muitas camadas ou desfoques grandes aumentam o trabalho de renderização; teste o resultado no tamanho real do elemento.

Camadas de sombra

Camada 1 0 1px 3px 0 · #0b0b12 · 18%
Camada 2 0 12px 28px -6px · #0b0b12 · 14%

CSS gerado

.box {
  border-radius: 16px;
  box-shadow: 0 1px 3px 0 rgb(11 11 18 / 0.18),
    0 12px 28px -6px rgb(11 11 18 / 0.14);
}

Quais opções e casos-limite o Gerador de sombras CSS suporta?

Referência técnica e opções
Parâmetro	Tipo	Padrão	Comportamento e casos-limite
Deslocamento X / Y	px	0 / 1	Move a sombra na horizontal e na vertical. Valores negativos deslocam para a esquerda ou para cima.
Desfoque	raio em px	3	Suaviza as bordas da sombra. Valores maiores produzem uma transição mais ampla.
Expansão	px	0	Aumenta ou diminui a forma da sombra antes do desfoque. Valores negativos a mantêm mais próxima do elemento.
Cor e opacidade	rgb com alfa	escuro a 18%	Define o tom e a intensidade de cada camada; a aparência também depende da cor do fundo.
Sombra interna	inset	desativado	Desenha a sombra dentro da caixa. A prévia e o PNG também incluem esse efeito.
Camadas	1–5, separadas por vírgulas	2	Combina até cinco sombras. A primeira entrada da lista CSS é desenhada à frente das demais.
border-radius	px	16	Ajusta os cantos da caixa e o contorno usado para renderizar as sombras.

Perguntas frequentes

Como faço uma sombra suave que não pareça um borrão?

Experimente duas camadas: uma curta e mais escura para o contato e outra ampla e suave para a elevação. Uma expansão negativa na segunda pode reduzir o halo nas laterais. Ajuste o resultado ao fundo e ao tamanho do elemento.

O que spread faz exatamente?

A expansão, ou `spread`, aumenta ou reduz a forma da sombra antes do desfoque. Um valor positivo amplia a área; um negativo a contrai. Isso é útil para manter uma sombra ampla próxima da caixa.

Como adiciono um brilho a um botão?

Use uma cor clara com pouco deslocamento e combine uma camada estreita com outra mais ampla. Por exemplo: `box-shadow: 0 0 8px rgb(255 122 69 / 0.7), 0 0 32px 4px rgb(255 122 69 / 0.35)`. Confira o efeito sobre o fundo da sua interface.

box-shadow afeta o layout ou o desempenho?

A sombra não altera as dimensões do layout, mas pode ser cortada pelo `overflow` de um ancestral. Desfoques grandes e várias camadas podem aumentar o custo de pintura, especialmente em elementos grandes ou animados.

O PNG inclui sombras internas?

A exportação atual inclui sombras internas no PNG. Elas são renderizadas com filtros e máscaras a partir do mesmo SVG da prévia. Ative `inset` na camada desejada e exporte novamente.

Quantas camadas de sombra um cartão deveria ter?

Duas camadas são um bom ponto de partida: uma para o contato e outra para a elevação. Use as camadas adicionais quando elas melhorarem o resultado; mais camadas não garantem uma sombra melhor e aumentam o custo de renderização.

Equipe ToolsByUs · Como verificamos nossas ferramentas