ToolStack

Gerador de box-shadow CSS

Monte um box-shadow CSS com controles ao vivo, presets e prévia e copie a regra pronta.

100% privado — tudo roda no seu navegador

Como usar

  1. 1

    Mova os controles para ajustar deslocamento, desfoque, expansão, cor e opacidade.

  2. 2

    Teste um preset ou cole um box-shadow existente para continuar editando.

  3. 3

    Copie a regra CSS e cole na sua folha de estilos.

Exemplos

Cartão elevado

Entrada

0 8px 24px -4px rgba(15,23,42,.18)

Saída

box-shadow: 0 8px 24px -4px rgba(15,23,42,.18);

Brilho neon

Entrada

0 0 24px 2px rgba(99,102,241,.45)

Saída

box-shadow: 0 0 24px 2px rgba(99,102,241,.45);

Perguntas frequentes

Para que serve a expansão?

Aumenta ou reduz a sombra em todas as direções antes do desfoque; valores negativos a comprimem.

Por que a sombra interna muda?

Ela é desenhada dentro do elemento, então parece uma superfície afundada.

Funciona com Tailwind?

Sim. Cole o valor em uma propriedade arbitrária como shadow-[…].

Ferramentas relacionadas

Gerador de border-radiusModele os quatro cantos separadamente, vincule-os e copie a regra CSS border-radius.Gerador de GradientesCrie gradientes CSS lineares e radiais visualmente e copie o código CSS.Gerador de Cores CSSTransforme uma cor base em uma escala de 10 tons e exporte como variáveis CSS.Formatador JSONFormate, embeleze, minifique e valide JSON na hora, direto no navegador.Validador JSONValide JSON instantaneamente e localize erros de sintaxe com linha, coluna e posição exatas — direto no seu navegador.Codificador/Decodificador Base64Codifique texto para Base64 e decodifique Base64 para texto, com suporte completo a Unicode e emoji — 100% no seu navegador.