CSS Box Shadow Generator (Multi-Layer & Inset)
Projetar sombras de caixa CSS suaves e multicamadas com desfoque ao vivo, espalhamento, alternância de inserção e exportação de código Tailwind / CSS em um clique.
Roda no seu navegador. Seus arquivos nunca saem do seu dispositivo. Veja como conferir
…
Como fazer
- 1Passo 1: abra CSS Box Shadow Generator (Multi-Layer & Inset) e informe seus dados
Digite seus números ou texto, adicione seu arquivo ou escolha as opções necessárias. Nada é enviado: tudo fica no seu navegador.
- 2Passo 2: o que CSS Box Shadow Generator (Multi-Layer & Inset) faz
Projetar sombras de caixa CSS suaves e multicamadas com desfoque ao vivo, espalhamento, alternância de inserção e exportação de código Tailwind / CSS em um clique.
- 3Passo 3: leia o resultado e compare
O resultado aparece na hora. Altere um valor para ver como a resposta muda e fique com o número que serve ao seu caso.
- 4Passo 4: copie ou salve
Copie o resultado ou baixe-o. Para uma decisão importante, confirme com a fonte oficial ou com um consultor.
Sobre esta ferramenta
Adicione profundidade e elevação tátil aos cartões e elementos da UI. Personalize deslocamentos horizontais/verticais, raio de borbulha, distância de espalhamento e cor de sombra com o controle deslizante de opacidade. Teste contra fundos claros e escuros, alterne sombras de inserção para estados de botão pressionados e copie instantaneamente classes CSS ou Tailwind padrão.
Dicas para melhores resultados
Reserve um momento para ler as opções antes de começar e teste a ferramenta primeiro com uma amostra pequena. Tudo roda no seu navegador, no seu próprio dispositivo, então nada do que você digita ou adiciona é enviado, e fechar a aba apaga tudo. Se algo não parecer certo, recarregue a página e tente de novo, ou use o link de relato desta página para nos contar o que deu errado e podermos corrigir. Se um resultado ainda parecer errado, mude um valor de cada vez para ver qual campo mais importa. Salve esta página nos favoritos se for precisar da ferramenta de novo.
Resumo rápido
- Categoria: Imagens
- Funciona no seu navegador, sem cadastro e sem envio de arquivos.
- O que você digita fica no seu dispositivo.
- Disponível em vários idiomas.
- Conteúdo revisado pela última vez:
Perguntas frequentes
Como faço para criar uma sombra suave e moderna?
Use um raio de desfoque maior (20px-40px), uma propagação negativa (-4px) e uma baixa opacidade (10%-25%) em uma cor esferográfica escura para uma sombra ultra suave.
Este apoio insere sombras internas?
Ativar a opção 'Insert Shadow' para gerar efeitos de sombra interna ideais para campos de entrada, poços e estados do botão pressionado.
Posso testar como a sombra aparece nos cartões do modo escuro?
Clique em "Lanterna escura" para testar o contraste de sombras em fundamentos escuros e profundos.
O CSS gerado é compatível com todos os navegadores?
Gera uma sintaxe padrão de sombras compatível com o W3C suportada por todos os navegadores modernos.