Pular para o conteúdo

Gerador de sombra CSS

Configure uma sombra, confira a caixa e copie o CSS.

Configure a sombra

Processado no navegador.

−200 a 200 px.

−200 a 200 px.

0–200 px; não negativo.

−200 a 200 px.

HEX opaco com 3 ou 6 dígitos.

0 transparente; 1 opaco.

Sombra gerada

Configure a sombra e gere o CSS.

Como criar uma sombra CSS

Crie uma única sombra externa ou interna e copie o valor confirmado.

  1. Informe X e Y.
  2. Defina desfoque e expansão.
  3. Informe cor e opacidade.
  4. Escolha externa ou interna.
  5. Gere, confira e copie.

Quatro medidas

X e Y deslocam. Blur suaviza e não aceita negativo. Spread positivo expande e negativo contrai.

Externa e interna

inset desenha dentro da caixa. A sombra externa não altera o layout.

Estado confirmado

Editar ou limpar remove prévia e cópia antigas.

Limites

  • Uma camada de sombra.
  • Sem editor completo ou animação.

Exemplos

12px 12px 24px 0 rgba(0,0,0,.3).

inset 0 4px 8px -2px rgba(0,0,0,.5).

Perguntas frequentes

Blur pode ser negativo?

Não, CSS não permite.

Spread pode ser negativo?

Sim, ele contrai a sombra.