Sobre esta ferramenta
A propriedade box-shadow é enganosamente profunda: deslocamento, desfoque, expansão, cor e a palavra-chave inset interagem, e a profundidade real geralmente vem de empilhar várias sombras. Este gerador oferece um controle deslizante para cada valor e permite adicionar várias camadas, para você criar desde uma sutil elevação de cartão até um ousado efeito neumórfico.
Tudo se atualiza numa prévia ao vivo, e o CSS de box-shadow pronto está a uma cópia de distância. Roda inteiramente no seu navegador.
Perguntas frequentes
Ele permite empilhar várias sombras?
Sim. Clique em 'Add Layer' para empilhar sombras extras — elas são combinadas em um único valor box-shadow separado por vírgulas, com a primeira camada renderizada por cima.
O que a caixa 'inset' faz?
Ela muda essa camada de uma sombra projetada para fora para uma sombra interna que aparece dentro da borda do elemento, útil para efeitos de pressionado ou afundado.
Como a transparência da sombra é tratada?
O controle de opacidade é combinado com o seletor de cor em uma cor hexadecimal de 8 dígitos (#rrggbbaa), obtendo transparência alfa real, já que o campo de cor sozinho não consegue armazenar o canal alfa.
Meus dados de design são enviados para algum lugar?
Não, a pré-visualização da sombra e o CSS gerado são criados inteiramente no seu navegador — nada é enviado ou armazenado em um servidor.
O que um valor de spread negativo faz?
Um spread negativo encolhe a forma da sombra antes do desfoque, geralmente usado para deixar a sombra mais fina ou mais justa do que o próprio elemento.