O que o Gerador de Box Shadow CSS produz?

Ele produz uma declaração CSS box-shadow completa construída a partir de uma ou mais camadas que você configura, cada uma com seu próprio deslocamento, desfoque, espalhamento, cor e ajuste inset, pronta para colar em uma folha de estilos.

O Gerador de Box Shadow CSS pode criar várias sombras empilhadas?

Sim. Clique em Adicionar camada para empilhar quantas camadas de sombra precisar — o box-shadow do CSS suporta camadas separadas por vírgula, e a ferramenta as junta na ordem correta.

O que é um box-shadow inset?

Um box-shadow inset é renderizado dentro da caixa do elemento em vez de atrás dela, útil para efeitos de botão pressionado ou bordas internas sutis. Ative Inset em qualquer camada para alternar.

O Gerador de Box Shadow CSS suporta cores rgba e hex?

Sim. Digite qualquer cor CSS válida — hex, rgb() ou rgba() — no campo de cor de uma camada, ou use o seletor de cor para valores hex; rgba permite controlar a opacidade da sombra separadamente.

O Gerador de Box Shadow CSS envia meus valores de design?

Não. Todas as camadas de sombra e o CSS gerado permanecem no seu navegador. Nenhum dado do seu design é enviado para o ArrayKit ou para qualquer servidor.

Como consigo uma sombra suave e realista em vez de uma borda dura?

Use um valor de desfoque maior em relação ao deslocamento e considere combinar uma sombra pequena e fechada com outra maior e mais suave — essa abordagem em duas camadas imita como as sombras aparecem sob luz real.

Gerador de Box Shadow CSS

Crie sombras CSS em camadas com pré-visualização ao vivo

O Gerador de Box Shadow CSS roda inteiramente no seu navegador. As camadas de sombra e o CSS gerado que você cria nunca saem do seu dispositivo e nada é enviado para o ArrayKit.

Abrir o Gerador de CSS Grid

Sobre Gerador de Box Shadow CSS

O Gerador de Box Shadow CSS constrói uma declaração box-shadow permitindo empilhar quantas camadas de sombra você quiser, cada uma com seu próprio deslocamento, desfoque, espalhamento, cor e alternância de inset. Uma pré-visualização ao vivo é atualizada instantaneamente conforme você ajusta os valores, para você ver exatamente como a sombra fica antes de copiar o código. Combine uma sombra ambiente suave sob uma sombra de contato mais fechada para obter profundidade realista, ou misture uma camada inset e outra externa para um efeito de botão pressionado. É feito para desenvolvedores front-end, designers e qualquer pessoa que estilize cartões, botões ou modais e queira um valor box-shadow preciso sem ajustar pixels manualmente na folha de estilos. Tudo roda localmente no seu navegador — nenhum dado de CSS ou design é enviado para lugar nenhum.

Recursos

Empilhe camadas de sombra ilimitadas, cada uma com x, y, desfoque, espalhamento e cor independentes
Alterne qualquer camada entre uma sombra projetada e uma sombra inset
A pré-visualização ao vivo mostra o efeito combinado de todas as camadas enquanto você edita
Seletor de cor mais um campo de texto para digitar valores hex, rgb ou rgba diretamente
Declaração CSS box-shadow: ...; pronta para copiar, gerada instantaneamente
Adicione ou remova camadas para criar sombras suaves simples ou profundidade complexa em camadas
Valores negativos de espalhamento e deslocamento são suportados para sombras recuadas
Roda inteiramente no seu navegador, sem enviar dados de sombra ou design para lugar nenhum

Como usar Gerador de Box Shadow CSS

Ajuste o x, y, desfoque e espalhamento da primeira camada de sombra
Escolha uma cor e ative Inset se quiser que a sombra fique dentro do elemento
Clique em Adicionar camada para empilhar outra sombra e ganhar profundidade
Copie o CSS box-shadow gerado no painel de código

Exemplo

Entrada

x0 y4 blur8 rgba(0,0,0,.2)

Saída

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);

Uma sombra projetada suave renderizada como uma declaração CSS pronta para colar.

Erros comuns e solução de problemas

O box-shadow parece muito duro ou quadrado em vez de suave. — Aumente o valor de desfoque em relação ao deslocamento — um desfoque maior com um deslocamento y moderado produz uma sombra mais suave e natural.
Uma camada inset não aparece na caixa de pré-visualização. — Sombras inset só aparecem dentro da área de padding do elemento, então garanta que o deslocamento e o desfoque da camada sejam grandes o suficiente para aparecer contra o fundo da pré-visualização.
Várias camadas deixam o valor da sombra difícil de ler na folha de estilos. — Isso é esperado — box-shadow aceita camadas separadas por vírgula, e o Gerador de Box Shadow CSS mantém cada camada na mesma linha por design; formate com um linter se preferir uma camada por linha.
Um valor de espalhamento negativo parece encolher a sombra até quase sumir. — Um espalhamento negativo puxa as bordas da sombra para dentro antes do desfoque ser aplicado, então combine com um desfoque maior para manter a sombra visível — isso é comum em sombras de contato mais fechadas.

Perguntas frequentes

O que o Gerador de Box Shadow CSS produz?: Ele produz uma declaração CSS box-shadow completa construída a partir de uma ou mais camadas que você configura, cada uma com seu próprio deslocamento, desfoque, espalhamento, cor e ajuste inset, pronta para colar em uma folha de estilos.
O Gerador de Box Shadow CSS pode criar várias sombras empilhadas?: Sim. Clique em Adicionar camada para empilhar quantas camadas de sombra precisar — o box-shadow do CSS suporta camadas separadas por vírgula, e a ferramenta as junta na ordem correta.
O que é um box-shadow inset?: Um box-shadow inset é renderizado dentro da caixa do elemento em vez de atrás dela, útil para efeitos de botão pressionado ou bordas internas sutis. Ative Inset em qualquer camada para alternar.
O Gerador de Box Shadow CSS suporta cores rgba e hex?: Sim. Digite qualquer cor CSS válida — hex, rgb() ou rgba() — no campo de cor de uma camada, ou use o seletor de cor para valores hex; rgba permite controlar a opacidade da sombra separadamente.
O Gerador de Box Shadow CSS envia meus valores de design?: Não. Todas as camadas de sombra e o CSS gerado permanecem no seu navegador. Nenhum dado do seu design é enviado para o ArrayKit ou para qualquer servidor.
Como consigo uma sombra suave e realista em vez de uma borda dura?: Use um valor de desfoque maior em relação ao deslocamento e considere combinar uma sombra pequena e fechada com outra maior e mais suave — essa abordagem em duas camadas imita como as sombras aparecem sob luz real.

Ferramentas relacionadas

Gerador de Border Radius — Crie border-radius CSS simples, por canto ou em blob com pré-visualização ao vivo
Gerador de Gradiente CSS — Crie gradientes lineares, radiais e cônicos com pontos de cor ao vivo.
Gerador de Cubic Bezier — Molde uma curva de easing cubic-bezier() e copie o timing.
Gerador de CSS Grid — Monte um layout de grid visualmente e copie o CSS.
Calculadora de CSS Clamp — Gere um valor clamp() fluido a partir de tamanhos e viewports.
Gerador de Cores Tailwind — Crie uma escala Tailwind 50-950 em OKLCH a partir de uma cor.