Diferença entre blur e spread?

Blur suaviza a borda da sombra — a distância até virar transparente. Spread expande ou encolhe a forma da sombra antes do blur (valor negativo, para dentro).

Quando empilhar camadas?

Sombras realistas geralmente precisam de duas: uma camada próxima e densa + outra mais ampla e suave. Material Design e os shadows padrão do Tailwind são todos multicamada.

Por que rgba() em vez de HEX?

Cores translúcidas deixam o fundo tingir a sombra, dando aspecto mais natural. rgba() permite ajustar o alfa diretamente.

Por que underscores no Tailwind?

Tailwind separa classes por espaços, então valores arbitrários usam underscores.

Gerador de CSS Box Shadow

Empilhe quantas camadas de sombra quiser, ajuste offset, blur, spread, cor e inset por camada, e veja a pré-visualização ao vivo. Seis presets (Soft, Medium, Large, Neumorphism, Inset, Glow) iniciam designs comuns. A saída é copiada como regra CSS e como classe Tailwind de valor arbitrário.

—

Presets

Camadas de sombra

Offset XOffset YBlurSpreadCor
Inset
Offset XOffset YBlurSpreadCor
Inset

Pré-visualização

CSS

box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.15), 0px 2px 6px -2px rgba(0, 0, 0, 0.08);

Tailwind

shadow-[0px_8px_24px_-4px_rgba(0,_0,_0,_0.15),_0px_2px_6px_-2px_rgba(0,_0,_0,_0.08)]

Como usar

Escolha um preset ou comece do zero.
Ajuste offset, blur, spread e cor de cada camada.
Ative Inset para sombras internas.
Copie a regra CSS ou a classe Tailwind.

Perguntas frequentes

Diferença entre blur e spread?: Blur suaviza a borda da sombra — a distância até virar transparente. Spread expande ou encolhe a forma da sombra antes do blur (valor negativo, para dentro).
Quando empilhar camadas?: Sombras realistas geralmente precisam de duas: uma camada próxima e densa + outra mais ampla e suave. Material Design e os shadows padrão do Tailwind são todos multicamada.
Por que rgba() em vez de HEX?: Cores translúcidas deixam o fundo tingir a sombra, dando aspecto mais natural. rgba() permite ajustar o alfa diretamente.
Por que underscores no Tailwind?: Tailwind separa classes por espaços, então valores arbitrários usam underscores.

Ferramentas relacionadas

Gerador de CSS Text-Shadow (Multi-Camada)

Empilhe quantas camadas de text-shadow quiser — neon, 3D, contorno, long-shadow — preview ao vivo e CSS pronto para copiar.

Cor 0 0

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor 0 0

Playground de Filtros CSS

Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.

Cor 0 0

Exportador de Tokens de Cor

Defina uma paleta de cores uma vez, exporte para CSS custom properties, config Tailwind, SCSS, LESS, JSON de design tokens, SwiftUI Color ou `colors.xml` Android. Swatches de pré-visualização ao vivo.

Cor 0 0

Buscador de nome de cor

Encontre o nome de cor CSS, Tailwind ou XKCD mais próximo de qualquer hex/RGB — ordenado por distância perceptual em OKLab.

Cor 0 0

Seletor de Cor HSL

Arraste sliders de matiz, saturação, luminosidade e alpha pra escolher cor — copie HEX, RGB, HSL ou valor arbitrário Tailwind.

Cor 0 0