Gerador de CSS Box Shadow

Uma declaração box-shadow tem seis partes móveis — deslocamento X e Y, desfoque, expansão, cor e a palavra-chave opcional inset — e a única forma de as acertar é vê-las. Este gerador coloca cada parte num controlo deslizante e mostra o resultado num cartão de pré-visualização enquanto arrasta, para que a linha CSS em baixo seja sempre exatamente aquilo que está a ver.

As sombras do mundo real raramente têm uma única camada. A lista de camadas permite empilhar até quatro sombras numa só declaração: uma linha escura e apertada para definição de aresta mais um desfoque suave e amplo para elevação, ou o par claro-escuro que define o neomorfismo. Selecione uma camada para a editar, remova as de que não precisa e o valor combinado de box-shadow é atualizado ao vivo.

As sombras são lidas de forma muito diferente em interfaces escuras, onde uma sombra preta sobre uma página quase preta simplesmente desaparece. A alternância de fundo de pré-visualização muda o pano de fundo entre claro e escuro para que possa verificar ambos os temas antes de publicar. As páginas predefinidas cobrem as variantes que as pessoas realmente procuram: uma sombra de elevação suave, um rebaixo interior (inset), a receita neomórfica de duas camadas e uma sombra subtil para cartões.

Tal como todas as ferramentas deste site, o gerador é gratuito e funciona totalmente no seu navegador: sem envio de ficheiros, sem conta, e continua a funcionar offline depois de a página ser carregada.