Utilore

Gerador de sombra CSS

Mova os controles e a amostra muda junto. Empilhe camadas quando uma sombra não basta: é assim que se obtém a profundidade suave e crível das interfaces bem feitas.

Camadas

Predefinições

Como usar

  1. Escolha o que vai receber a sombra: um bloco ou texto.
  2. Ajuste deslocamento, desfoque e cor — a amostra se redesenha na hora.
  3. Acrescente uma camada se faltar profundidade: duas ou três sombras leves valem mais que uma pesada.
  4. Copie a linha CSS abaixo dos controles.

Bom saber

Por que a sombra de texto tem menos ajustes

A propriedade text-shadow aceita apenas deslocamento, desfoque e cor. A extensão e o modo interno pertencem só ao box-shadow, e um valor a mais invalida a declaração inteira: o navegador a descarta em silêncio e a sombra simplesmente some. Por isso, ao mudar para o modo texto, esses dois controles são escondidos em vez de contar com que sejam ignorados.

Várias camadas leves ganham de uma pesada

Uma sombra real não é uniforme: é densa junto ao objeto e se dissolve à medida que se afasta. Uma única sombra com muito desfoque vira um halo cinza, enquanto duas ou três camadas com deslocamentos diferentes e pouca opacidade dão a profundidade que se vê nas interfaces caprichadas. A ferramenta guarda cada camada em separado, e a linha copiada as lista em ordem.

Perguntas frequentes

Para que serve a extensão?

Ela aumenta ou encolhe a sombra antes do desfoque ser aplicado. Um valor negativo recolhe a sombra para que não apareça pelos lados — é o truque das sombras limpas em cartões, onde o brilho deve ficar sob o bloco e não em volta.

Como faço uma sombra interna?

Marque «Sombra interna»: a palavra inset aparece no início da linha e a sombra vai para dentro do bloco. Usa-se em botões pressionados e campos de entrada, onde a profundidade deve ser lida como afundamento, não como relevo.

Por que minha sombra está invisível?

Na maioria das vezes a opacidade está em zero, ou o deslocamento e o desfoque são ambos zero e a sombra se esconde exatamente atrás do bloco. Ela também some se o elemento pai tem overflow: hidden e a sombra cai fora da área visível.

Funciona em todos os navegadores?

Sim. box-shadow e text-shadow são padrão há anos e não precisam de prefixos; os valores gerados aqui são CSS comum, sem extensões de fabricante.

Ferramentas relacionadas