Gerador de CSS Box Shadow
Cor
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
box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.15), 0px 2px 6px -2px rgba(0, 0, 0, 0.08);
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
Paleta de Cor a partir de Imagem
Solte uma imagem e a ferramenta extrai uma paleta de cores dominantes via Canvas — copie HEX ou pegue o conjunto inteiro.
Simulador de Daltonismo
Veja como sua imagem se parece para pessoas com cada um dos 8 tipos de deficiência visual cromática (CVD).
Conversor de Formatos de Cor
Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.
Gerador de Gradientes CSS
Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.
Gerador de Paleta de Cores
Crie paletas harmoniosas a partir de uma cor base em seis esquemas.
Verificador de Contraste de Cor
Verifique o contraste texto/fundo nos níveis WCAG AA e AAA.