Gerador de sombras CSS

Entenda os valores de sombra CSS

box-shadow combina deslocamentos horizontal e vertical, desfoque, expansão, cor e a palavra opcional inset. text-shadow usa deslocamentos, desfoque e cor. Os controles atualizam imediatamente a declaração completa para mostrar o efeito de cada valor.

Crie profundidade com várias camadas

Várias sombras sutis costumam parecer mais naturais que uma única sombra pesada. Combine uma camada escura e curta para contato com outra suave e ampla para elevação, ou empilhe camadas coloridas para criar brilho.

Da prévia ao CSS de produção

Escolha box-shadow ou text-shadow, comece com uma predefinição e ajuste posição, desfoque, expansão, opacidade, raio e cores. Copie o CSS quando a prévia estiver correta e teste no fundo real e nos estados responsivos do projeto.

Aprenda e continue criando