Card Shadow CSS – Código sutil de sombra de caixa
Crie código CSS box-shadow visualmente: controles deslizantes para deslocamento, desfoque, propagação, cor com opacidade, modo de inserção e até quatro camadas com visualização ao vivo.
Resultado
Esta página abre a predefinição do gerador de sombra de caixa para uma sombra de cartão clássica: 2px para baixo, desfoque de 8px, 15% de opacidade preta. É deliberadamente silencioso – o suficiente para separar um cartão da página sem se anunciar – e a visualização mostra exatamente como é silencioso.
Esse intervalo corresponde às etapas de elevação mais baixas na maioria dos sistemas de design: cartões de lista, menus suspensos, popovers e linhas de tabela ao passar o mouse. Se você precisar de uma elevação mais forte para modais ou painéis flutuantes, aumente o deslocamento Y e desfoque juntos – eles devem crescer proporcionalmente para manter a fonte de luz confiável.
Copie a linha box-shadow em seus estilos de componente ou duplique-a como uma segunda camada com um desfoque mais apertado para adicionar definição de borda. A ferramenta é gratuita e funciona inteiramente no seu navegador.