Como criar uma sombra de caixa CSS e copiar o código?

Ajuste os controles deslizantes de deslocamento x e y, desfoque, propagação, Cor e opacidade, observando a pré-visualização ao vivo. Depois, pressione Copiar na saída CSS. Também pode começar pelas Predefinições como Suave, Brilho ou Material 8.

Posso empilhar várias sombras num só elemento?

Sim. Pressione + Adicionar outra camada de sombra para acrescentar mais camadas e depois reordená-las, Ocultar ou Remover cada uma. As camadas são unidas por vírgulas num único valor box-shadow.

Como faço uma sombra interna?

Selecione uma camada e ative Sombra interna, ou carregue a predefinição Interno. A saída passa a incluir a palavra-chave inset para essa camada.

Posso obter uma classe Tailwind em vez de CSS simples?

Sim. Além da declaração CSS, a ferramenta gera uma classe de valor arbitrário Tailwind no formato shadow-[...], com espaços substituídos por underscores, pronta para colar na sua marcação.

Há uma forma mais fácil de definir a posição da sombra do que com os controles deslizantes?

Sim. Arraste a caixa de pré-visualização para mover a sombra da camada ativa e mantenha Shift premido para um controlo fino. Também pode alterar o Fundo da pré-visualização e a Cor da caixa para ver como a sombra fica no seu design.

Sim. Todas as ferramentas são gratuitas, sem conta e sem cartão de crédito. O processamento acontece no seu dispositivo, e não nos nossos servidores, e é isso que permite manter tudo gratuito.

Sim. Funciona nos navegadores móveis atuais em iOS e Android, sem instalar nada.

🎨

Gerador de sombra de caixa CSS grátis

Construtor visual para CSS box-shadow com visualização ao vivo, empilhamento multicamadas, seletor de cores, alternância de inserção e cópia com um clique. Inclui predefinições de material, neumorfismo e brilho.

Executa no seu navegadorSem inscrição, sem pop-upsSem login necessárioGratuito para sempre

Funciona offline depois de carregado

Fundo da pré-visualização

Arraste a caixa para posicionar a sombra da camada ativa - mantenha Shift pressionado para controle fino

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Predefinições

Cor da caixa

Raio da borda (16px)

x (0px)

y (4px)

desfoque (12px)

expansão (0px)

Cor

Opacidade (15%)

Sombra interna

Usos comuns

Sombras de Interface de Usuário do CartãoConstrua sombras de cartão elegantes para painéis, grades de produtos e painéis.
Efeitos de Pressão do BotãoConstrua sombras de botão que imitam profundidade e estados de pressão do mundo real.
Interface de Usuário Suave NeumorfismoCrie a aparência soft-UI de neumorfismo com sombras claras + escuras emparelhadas.
Sombras Modal e PopoverCrie a sensação elevada e flutuante para diálogos e menus suspensos.
Efeitos de Brilho e Anel de FocoCrie efeitos brilhantes, anéis de foco e destaques estilo neon.

Como funciona

O gerador de box-shadow é uma ferramenta React totalmente do lado do cliente — sem servidor, sem biblioteca. Mantém uma lista de objetos de camada de sombra em estado, monta strings CSS box-shadow válidas a cada mudança usando um formatador rgba() escrito à mão, e aplica-as diretamente a um elemento de pré-visualização via a propriedade style do React para que o próprio motor de renderização do navegador desenhe o resultado instantaneamente.

1
Os parâmetros de camada alimentam o formatador
Cada camada de sombra armazena desvios x/y, desfoque, propagação, uma cor hexadecimal, e um valor de opacidade. A cada mudança, uma pequena função shadowToCss converte a cor hexadecimal em componentes RGB com uma expressão regular, depois monta a string rgba() — por exemplo, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Várias camadas são unidas com vírgulas.
2
O navegador renderiza a pré-visualização ao vivo
A string montada é atribuída à propriedade de estilo boxShadow de um elemento div diretamente em JSX. O React atualiza o atributo DOM, e o motor CSS do navegador pinta a sombra imediatamente — não há canvas ou WebGL envolvido, apenas renderização CSS nativa.
3
Arrastar para posicionar usa a Pointer Events API
Clicar e arrastar a caixa de pré-visualização chama setPointerCapture no elemento, depois acompanha os deltas de onPointerMove para atualizar os desvios x e y da camada ativa em tempo real. Segurar Shift aplica um fator de escala de 0,25x para posicionamento fino.
4
A saída é copiada para a área de transferência
A ferramenta produz dois formatos de saída a partir dos mesmos dados de camada: uma declaração CSS box-shadow padrão, e uma classe de valor arbitrário Tailwind (shadow-[...]) onde os espaços são substituídos por sublinhados segundo as regras de sintaxe do Tailwind. A cópia de um clique usa navigator.clipboard.writeText.