Este gerador de box-shadow CSS é gratuito?

Sim, totalmente gratuito. Nenhuma conta, nenhum período de teste, nenhum custo oculto — basta abrir a página e começar a gerar sombras.

Funciona offline, sem conexão com a internet?

Sim. A ferramenta funciona totalmente no seu navegador sem chamadas de servidor. Depois que a página carrega, você pode desconectar da internet e ela continuará a funcionar perfeitamente.

Meus dados de design são privados? Algo é carregado para o servidor?

Nada é carregado. Todas as configurações de sombra são processadas localmente no seu navegador e salvas apenas no localStorage do seu navegador. Nenhum dado jamais deixa seu dispositivo.

Posso empilhar múltiplas sombras em uma única regra CSS?

Sim. Clique em '+ Adicionar Sombra' quantas vezes precisar. A ferramenta empilha todas as camadas em um único valor box-shadow separado por vírgulas — perfeito para neumorfismo, efeitos de brilho ou profundidade multi-direcional.

Como criar um efeito de sombra interna (inset)?

Marque a caixa 'Inset' em qualquer camada de sombra. Uma sombra interna aparece dentro do limite do elemento, útil para estados de botões pressionados ou efeitos de brilho interno. O CSS gerado inclui automaticamente a palavra-chave 'inset'.

Esta ferramenta envia meus dados?

Não. Tudo é executado no seu navegador, então seus dados nunca saem do seu dispositivo — e funciona até offline depois que a página carrega.

🔲 Gerador de Box-Shadow CSS

Obtenha seu código CSS box-shadow em segundos — sem instalação, sem conta, sem internet necessária. Arraste os sliders para definir deslocamento, desfoque, espalhamento, cor e opacidade para cada camada de sombra, veja a pré-visualização em tempo real atualizar imediatamente, depois copie o CSS pronto para colar.

Pré-visualização

Privado por design. Esta ferramenta funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado, e funciona offline.

Sobre

Esta ferramenta funciona totalmente no seu navegador usando JavaScript puro — seus designs nunca saem do seu dispositivo. Você pode empilhar várias camadas de sombra para criar efeitos de profundidade, neumorfismo, efeitos de brilho ou elevações sutis de cartões. Cada camada suporta sombras internas para efeitos de brilho interno ou botões pressionados. A saída é CSS padrão que você pode inserir diretamente em qualquer folha de estilo, framework ou token de design.

Como usar

Clique em '+ Adicionar Sombra' para criar sua primeira camada de sombra.
Use os sliders de Offset X, Offset Y, Blur, Spread e Opacity para moldar cada sombra. Ative 'Inset' para um efeito de sombra interna.
Clique na paleta de cores para escolher qualquer cor de sombra. A pré-visualização em tempo real atualiza conforme você ajusta cada controle.
Adicione mais camadas para efeitos complexos de múltiplas sombras, como neumorfismo ou brilhos empilhados.
Clique em 'Copiar CSS' para obter a declaração completa de box-shadow e colar em sua folha de estilo.

Perguntas frequentes

Este gerador de box-shadow CSS é gratuito?: Sim, totalmente gratuito. Nenhuma conta, nenhum período de teste, nenhum custo oculto — basta abrir a página e começar a gerar sombras.
Funciona offline, sem conexão com a internet?: Sim. A ferramenta funciona totalmente no seu navegador sem chamadas de servidor. Depois que a página carrega, você pode desconectar da internet e ela continuará a funcionar perfeitamente.
Meus dados de design são privados? Algo é carregado para o servidor?: Nada é carregado. Todas as configurações de sombra são processadas localmente no seu navegador e salvas apenas no localStorage do seu navegador. Nenhum dado jamais deixa seu dispositivo.
Posso empilhar múltiplas sombras em uma única regra CSS?: Sim. Clique em '+ Adicionar Sombra' quantas vezes precisar. A ferramenta empilha todas as camadas em um único valor box-shadow separado por vírgulas — perfeito para neumorfismo, efeitos de brilho ou profundidade multi-direcional.
Como criar um efeito de sombra interna (inset)?: Marque a caixa 'Inset' em qualquer camada de sombra. Uma sombra interna aparece dentro do limite do elemento, útil para estados de botões pressionados ou efeitos de brilho interno. O CSS gerado inclui automaticamente a palavra-chave 'inset'.
Esta ferramenta envia meus dados?: Não. Tudo é executado no seu navegador, então seus dados nunca saem do seu dispositivo — e funciona até offline depois que a página carrega.