Gerador de Box-Shadow

O que faz

Cria valores de box-shadow CSS em camadas, com pré-visualização ao vivo e saída pronta para copiar. Cada camada tem as cinco propriedades padrão - deslocamento X, deslocamento Y, blur, spread, cor - mais um interruptor Inset e um controle deslizante de Opacity de 0-1 cujo valor é composto em uma cor rgba() no momento da geração. Empilhe quantas camadas precisar; elas são unidas por vírgulas na ordem de saída, exatamente como o CSS espera.

Cinco predefinições de um clique (Soft, Sharp, Elevated, Inner, Glow) substituem as camadas atuais por combinações comprovadas - padrões de camada única mais uma pilha “Elevated” de duas camadas. O palco de pré-visualização renderiza sua sombra em uma caixa arredondada cuja cor você controla, sobre uma escolha de fundos liso, xadrez ou dividido para julgar a opacidade. 100% no cliente.

Como usar

1. Clique em uma predefinição na barra de ferramentas para partir de uma sombra já validada, ou edite a camada suave inicial diretamente. Reset volta à camada suave única padrão.
2. No Stage, escolha o Backdrop de pré-visualização (Plain / Checker / Split) e defina a Box color com o seletor de amostras.
3. Para cada seção Layer, ajuste os controles:
   • Inset - desenha a sombra dentro da caixa em vez de fora dela.
   • Color - a cor base da camada (seletor de amostras, hex).
   • Offset X / Offset Y - posição em pixels; negativos são válidos.
   • Blur - raio de desfoque em pixels (mínimo 0).
   • Spread - expande ou contrai a sombra; valores negativos a comprimem.
   • Opacity - controle de 0-1, misturado na cor rgba() emitida.
4. Clique em Add layer para empilhar outra sombra (por exemplo, uma sombra de contato curta sob uma ambiente ampla). Remova camadas com o botão de lixeira em cada seção - a última camada não pode ser removida.
5. Veja a pré-visualização ao vivo atualizar enquanto você edita.
6. Clique em Copy na saída CSS para pegar a declaração pronta.

Exemplos

Verificado executando buildBoxShadow() de src/lib/boxShadow.ts com os valores exatos de camada que as cinco predefinições instalam:

Soft (também o estado inicial da ferramenta)

box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);

Elevated - duas camadas, contato curto + ambiente ampla:

box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1), 0px 12px 28px -6px rgba(0,0,0,0.28);

Inner

box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.35);

Glow - sombra colorida, sem deslocamento:

box-shadow: 0px 0px 24px 2px rgba(59,130,246,0.45);

Sharp: box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);

Bom saber

• Privado: a geração é local; nada é enviado.
• As camadas são emitidas unidas por vírgulas na ordem da lista - a primeira camada pinta por cima no CSS, então a ordem importa visualmente.
• A opacidade é aplicada por camada via rgba(), então você pode misturar uma sombra de contato preta pesada com um brilho colorido suave em uma única declaração.
• O fundo Split mostra sua sombra contra as metades clara e escura ao mesmo tempo - a forma mais rápida de verificar uma sombra que precisa funcionar em ambos os temas.
• Spread negativo (-4px, -6px nas predefinições) impede que um blur grande transborde pelas bordas da caixa.
• Ferramentas relacionadas: CSS Gradient Generator, Glassmorphism Generator, Color Picker & Converter