# Gerador de sombras CSS

> Monte uma box-shadow em camadas, tingida com o tom do fundo, e leve a cor numa custom property pronta para trocar.

URL: https://dpw.dev/ferramentas/gerador-de-sombras/

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.

Esta página tem um gerador interativo no navegador. Exemplo: 4 camadas sobre o fundo `#d6e4ff`, com 16px de elevação e 30% de intensidade:

```css
.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.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/box-shadow)).

## Leia no blog

- [Cores e variáveis CSS: box-shadow-color?!](https://dpw.dev/css/variaveis-css-box-shadow-color/)

## Conceitos Fundamentais de CSS

O `box-shadow` não ocupa espaço no layout: não empurra os vizinhos nem muda o tamanho da caixa. O livro explica o que entra ou não na conta do layout em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml