Gerador de sombras CSS
Escolha o fundo, a elevação e a intensidade: o gerador monta uma sombra em camadas, tingida com o tom do fundo, e deixa a cor numa custom property para você trocar sem reescrever a sombra.
Veja
Copie o código
.element {
/* Não existe box-shadow-color: a cor fica numa custom property. */
--shadow-color: oklch(30% 0.04 264);
box-shadow:
0 2px 2px color-mix(in srgb, var(--shadow-color) 9%, transparent),
0 4px 4px color-mix(in srgb, var(--shadow-color) 9%, transparent),
0 8px 8px color-mix(in srgb, var(--shadow-color) 9%, transparent),
0 16px 16px color-mix(in srgb, var(--shadow-color) 9%, transparent);
}O problema
A sombra de sempre, 0 16px 32px rgb(0 0 0 / 30%), é uma mancha cinza de borda uniforme. Sobre fundo branco ela passa; sobre um fundo colorido, o preto semitransparente acinzenta a cor e a caixa parece colada na página.
Uma sombra de verdade tem o tom da superfície em que cai, é nítida perto do objeto e se espalha longe dele. E, como não existe box-shadow-color, trocar só a cor da sombra obriga a reescrever todas as camadas.
Como funciona
O box-shadow aceita várias sombras separadas por vírgula. Cada camada tem o dobro da distância e do desfoque da anterior:
box-shadow: 0 2px 2px …, 0 4px 4px …, 0 8px 8px …, 0 16px 16px … Perto da caixa as camadas se sobrepõem e a sombra fica densa; longe, só a maior chega, e ela fica difusa. A opacidade de cada camada é 1 − (1 − I)^(1/N), para que a soma de todas dê a intensidade I escolhida.
A cor tem o matiz e o croma do fundo, mais escura, escrita em oklch(). Ela fica em --shadow-color, e cada camada a usa com color-mix(in srgb, var(--shadow-color) 9%, transparent), que devolve a mesma cor com 9% de opacidade. A custom property faz o papel do box-shadow-color que o CSS não tem: um modificador troca só ela.
Fundo escuro quase não deixa ver sombra nenhuma. Ali, a elevação costuma vir de uma superfície um pouco mais clara que o fundo, ou de uma borda.
Quando usar
- Cards, menus e painéis que flutuam sobre um fundo colorido.
- Uma escala de elevação (card, menu, modal) que muda a distância e mantém a mesma cor.
- Componentes que trocam a cor da sombra por tema ou por estado, mudando só a custom property.
- Trocar a sombra preta de uma camada que veio de um framework ou de um design antigo.
Leia no blog
Outras ferramentas
Conversor de cores CSS
Cole uma cor em qualquer sintaxe e veja a mesma cor em hex, rgb(), hsl(), oklch(), lab() e display-p3, com o aviso de gamut.
CorEscala de cores OKLCH
Gere os tons de 50 a 950 a partir de uma cor, com luminosidade uniforme em OKLCH, o contraste de cada tom e as custom properties prontas.
CorGerador de gradientes CSS
Monte gradientes lineares, radiais e cônicos e compare a interpolação em sRGB, OKLab e OKLCH, sem o cinza no meio.