Gerador de box-shadow para sombras CSS empilhadas
Cartões planos costumam precisar de duas sombras, não de uma: uma escura e curta para a borda de contato e outra ampla e suave para dar elevação. Este gerador de box-shadow guarda até seis camadas em uma lista, desenha cada mudança numa caixa de prévia e escreve a declaração box-shadow pronta. A página abre com a predefinição "Em camadas" aplicada, então há um resultado na tela antes de você tocar em qualquer coisa.
Uma camada tem deslocamento x e y, desfoque, expansão, cor, opacidade e uma chave de sombra interna. Você pode ocultar uma camada sem apagá-la.
Da predefinição ao CSS colado
- Clique em uma predefinição como "Suave", "Brilho" ou "Neumorfismo". Ela preenche a lista de camadas, a cor da caixa, a cor da página e o raio da borda.
- Mude um valor com o controle deslizante ou digite um número ao lado. Uma cor aceita o seletor ou um código hexadecimal com 3 ou 6 dígitos.
- Aperte "Adicionar camada" para uma nova sombra. Os botões de seta mudam a ordem, o botão de copiar duplica uma camada e o botão da lixeira a remove.
- Defina "Cor da caixa", "Cor da página" e "Raio da borda" conforme o seu design, para que a prévia mostre a sombra sobre o fundo que você realmente usa.
- Aperte "Copiar CSS" para a declaração inteira, ou "Copiar só o valor" para a parte depois dos dois-pontos.
O que vai parar na linha de saída
A primeira camada da lista é pintada por cima. O CSS lê uma lista separada por vírgulas nessa ordem, e a ferramenta não ordena nada. Um zero perde a unidade: um deslocamento de 0 é escrito como 0, não 0px.
Uma camada com 100 % de opacidade recebe uma cor hexadecimal em minúsculas, como #111827. Abaixo de 100 % ela é escrita como rgb(0 0 0 / 15%), com a opacidade em porcentagem. Camadas ocultas ficam de fora. Se todas estiverem ocultas, a saída é box-shadow: none;. As camadas ficam em linhas separadas, e nenhum prefixo -webkit- é adicionado.
Intervalos que os controles não ultrapassam
Deslocamentos e expansão vão de -100 a 100 px, o desfoque de 0 a 200 px, a opacidade de 0 a 100 % e o raio da borda de 0 a 100 px. Todos os valores são números inteiros. Digite 500 num campo de desfoque e ele vira 200 quando você sai do campo. Seis camadas é o máximo, e a última camada restante não pode ser removida.
As cores precisam ser hexadecimais. Nomes como red e valores como hsl() são recusados com uma mensagem, e o campo volta para a última cor válida. A caixa de prévia é um quadrado fixo de 150 px, e a área dela corta sombras grandes na borda.
Nada sai desta aba
Os valores são transformados em CSS pelo JavaScript da página. Apertar um botão não envia nenhuma requisição, e o painel de rede do seu navegador mostra isso. Os botões de copiar escrevem na área de transferência. A ferramenta não guarda nada, então recarregar traz de volta a predefinição "Em camadas".
Perguntas frequentes (FAQ)
box-shadow, separadas por vírgulas. O gerador faz isso quando você aperta "Adicionar camada", até 6 camadas, e a primeira é pintada por cima.