Gerador de sombra de caixa CSS

Uma declaração box-shadow tem seis partes móveis – deslocamento X e Y, desfoque, propagação, cor e a palavra-chave opcional inset – e a única maneira de acertá-las é vê-las. Este gerador coloca cada parte em um controle deslizante e renderiza o resultado em um cartão de visualização conforme você arrasta, para que a linha CSS na parte inferior seja sempre exatamente o que você está vendo.

As sombras do mundo real raramente são uma única camada. A lista de camadas permite empilhar até quatro sombras em uma declaração: uma linha escura estreita para definição de borda mais uma lavagem ampla e suave para elevação, ou o par claro e escuro que define o neumorfismo. Selecione uma camada para editá-la, remova aquelas que você não precisa e o valor combinado da sombra da caixa será atualizado ao vivo.

As sombras são lidas de maneira muito diferente em interfaces escuras, onde uma sombra preta em uma página quase preta simplesmente desaparece. A alternância do plano de fundo da visualização alterna o plano de fundo entre claro e escuro para que você possa verificar os dois temas antes do envio. As páginas predefinidas cobrem as variantes que as pessoas realmente procuram: uma sombra de elevação suave, um poço inserido, a receita de neumorfismo de duas camadas e uma sombra sutil de cartão.

Como todas as ferramentas deste site, o gerador é gratuito e funciona inteiramente no seu navegador: sem upload, sem conta e continua funcionando offline após o carregamento da página.