Gerador de box-shadow

Ajuste deslocamento, desfoque, expansão, cor e opacidade com controles deslizantes e veja uma caixa de pré-visualização mudar em tempo real. O CSS gerado é atualizado enquanto você arrasta, pronto para colar direto numa folha de estilos.

Meus dados são enviados para algum lugar?

Não, tudo roda no seu navegador, então não há nada para enviar e nenhum rastreamento do que você cria.

O que o deslocamento, o desfoque e a expansão controlam?

O deslocamento horizontal e vertical afastam a sombra da caixa: valores positivos empurram para a direita e para baixo, negativos empurram para a esquerda e para cima. O desfoque controla o quão suave é a borda da sombra, de uma silhueta com borda dura em zero até um brilho difuso em valores mais altos. A expansão aumenta ou diminui o formato da sombra antes de o desfoque ser aplicado: uma expansão positiva deixa a sombra maior que a caixa em todos os lados, e uma negativa a encolhe. Cor e opacidade trabalham juntas: escolha qualquer cor hex, e o controle de opacidade define o quão sólida ou fraca ela aparece, o que a ferramenta converte por baixo dos panos num valor rgba() padrão. Ativar o inset vira a sombra do lado de fora da caixa para o lado de dentro, o que dá o efeito de algo pressionado ou esculpido em vez de elevado.

Como funcionam várias camadas de sombra?

Adicione várias camadas para empilhar sombras da forma que o CSS permite, separando cada uma por vírgula no valor final de box-shadow. Um padrão comum é combinar uma sombra estreita, escura e de baixa opacidade rente à caixa com outra mais suave, larga e clara mais afastada, o que passa uma sensação de profundidade mais natural do que uma sombra única conseguiria. As camadas são desenhadas na ordem em que você as adiciona, com a primeira ficando por cima, exatamente como o navegador pinta valores de box-shadow separados por vírgula. Dá para misturar camadas com e sem inset na mesma pilha, útil para um card que precisa de uma sombra externa sutil e um leve brilho interno ao mesmo tempo.

Usos comuns: cards e botões que precisam de profundidade, efeitos neumórficos ou inset, ou simplesmente ajustar a sombra certa sem chutar valores de pixel na mão. Veja a referência de box-shadow do MDN para a sintaxe completa e o suporte dos navegadores, e o guia de cores CSS do MDN para entender como funcionam os valores rgba() no CSS gerado.