Ir para o conteúdo principal
DesenvolvedorProcessado no seu navegador

Gerador Box Shadow CSS

Crie sombras CSS visualmente com preview em tempo real.

0 de 3 usos hoje · 3 restantes. Vire Pro e remova o limite.

Upgrade
Box Shadow CSS CSS3 Generator

Gerador Box Shadow CSS

Crie sombras multicamadas perfeitas visualmente e exporte a propriedade CSS pronta.

Camadas
1/6
Exportação
CSS3
Processamento
Processamento no dispositivo
01

Preview ao vivo

CSS Result
box-shadow: 0px 30px 60px -15px #4f46e566;
02

Camadas (1/6)

1
Deslocamento X0px
Deslocamento Y30px
Desfoque (Blur)60px
Expansão (Spread)-15px
Opacidade40%
Sobre

O que é Gerador Box Shadow CSS?

Por Quorify EditorialAtualizado em

A propriedade box-shadow do CSS é o que dá profundidade às interfaces modernas: o leve descolamento de um cartão sobre o fundo, a sombra suave de um botão flutuante, o contorno interno de um campo afundado. O problema é que essa propriedade tem vários parâmetros que interagem entre si de forma pouco óbvia, e ajustar sombra escrevendo número por número no código, recarregando a página a cada tentativa, é um desperdício de tempo. O gerador de box-shadow do Quorify resolve isso permitindo que você manipule a sombra visualmente e veja o resultado em tempo real, copiando o CSS final só quando estiver satisfeito. Uma box-shadow é definida por alguns valores principais: o deslocamento horizontal e vertical, que dizem para onde a sombra se projeta; o desfoque, que controla quão suave é a borda da sombra; o espalhamento, que aumenta ou diminui o tamanho da sombra antes do desfoque; e a cor, geralmente com algum grau de transparência para parecer natural. Há ainda a opção de sombra interna, que projeta o efeito para dentro do elemento em vez de para fora. Cada um desses parâmetros muda o caráter da sombra, e é justamente a interação entre eles que torna o ajuste visual tão mais eficiente do que o tentativa-e-erro no código. O preview em tempo real é o coração da ferramenta. Em vez de imaginar como rgba e pixels vão se traduzir na tela, você move os controles e observa a sombra se transformar imediatamente sobre um elemento de exemplo. Isso encurta drasticamente o ciclo entre intenção e resultado: dá para experimentar uma sombra dramática e exagerada, depois suavizá-la até chegar naquele efeito sutil e elegante que combina com o resto do layout, tudo sem sair da página. Quando o resultado agrada, a ferramenta entrega a regra CSS pronta para colar diretamente no seu estilo. Não há cálculo enviado para fora nem dependência de conexão durante o ajuste: a renderização da sombra usa o próprio motor do navegador, exatamente o mesmo que vai exibir a sombra no seu site final. Por isso o que você vê no preview é fiel ao que aparecerá em produção. Para quem desenha interfaces, esse gerador transforma uma das propriedades mais chatas de acertar na mão em um ajuste rápido e visual.

Casos

Quando usar

  1. Um desenvolvedor front-end quer dar elevação a um cartão de produto, mas não sabe quantos pixels de desfoque ficam bons. Ajustando os controles visualmente, ele encontra a sombra ideal em segundos e copia o CSS pronto.

  2. Uma designer está criando um sistema de botões com estados de profundidade. Ela gera uma sombra sutil para o estado normal e uma mais pronunciada para o hover, comparando as duas no preview lado a lado.

  3. Quem está aprendendo CSS quer entender a diferença entre desfoque e espalhamento. Movendo um parâmetro de cada vez e observando o preview, fica claro o papel de cada valor na aparência final da sombra.

  4. Um desenvolvedor precisa de um efeito de campo afundado em um formulário, usando sombra interna. A ferramenta permite ativar a opção inset e ajustar a intensidade até o input parecer rebaixado na tela.

  5. Uma equipe está padronizando a aparência de um design system e quer documentar os valores exatos de sombra usados nos componentes. O CSS gerado vira a referência oficial colada na documentação.

Método

Como funciona

Para criar a sua sombra, ajuste cada parâmetro nos controles e acompanhe a transformação no elemento de preview em tempo real. Comece pelos deslocamentos horizontal e vertical para definir a direção da sombra, depois aumente o desfoque para suavizar suas bordas. O espalhamento controla quanto a sombra cresce ou encolhe antes do desfoque, útil para criar tanto contornos firmes quanto auras difusas. Defina a cor com algum nível de transparência, já que sombras totalmente opacas raramente parecem naturais. Se quiser que o efeito se projete para dentro do elemento, ative a opção de sombra interna. À medida que você mexe nos controles, o preview reflete a aparência exata que a sombra terá no navegador, porque a renderização usa o próprio motor de CSS. Experimente livremente: comece exagerado para entender o limite de cada valor e depois refine até o efeito desejado. Quando estiver satisfeito, copie a regra CSS gerada e cole no estilo do seu elemento. Como tudo roda na página, sem envio de dados, você pode iterar quantas variações precisar e até documentar diferentes versões de sombra para um design system sem nenhuma espera.

FAQ

Perguntas frequentes

Qual a diferença entre desfoque e espalhamento na box-shadow?
O desfoque controla a suavidade das bordas da sombra: valores maiores deixam a sombra mais difusa. O espalhamento aumenta ou diminui o tamanho da sombra antes de aplicar o desfoque, útil para criar contornos mais firmes ou sombras maiores e mais presentes.
O que é a sombra interna (inset)?
A sombra interna projeta o efeito para dentro do elemento em vez de para fora, criando a impressão de que ele está rebaixado ou afundado. É muito usada em campos de formulário e botões pressionados para dar sensação de profundidade invertida.
O preview é fiel ao que vou ver no meu site?
Sim. A sombra é renderizada pelo próprio motor de CSS do navegador, o mesmo que exibirá o efeito no seu site em produção. Por isso o que aparece no preview corresponde fielmente ao resultado final quando você colar o CSS gerado.
Por que usar cor com transparência na sombra?
Sombras totalmente opacas tendem a parecer artificiais e pesadas. Aplicar algum grau de transparência faz a sombra se misturar suavemente com o fundo, imitando o comportamento da luz real e resultando em um efeito mais natural e elegante.
Posso aplicar mais de uma sombra no mesmo elemento?
O CSS permite empilhar múltiplas sombras separando-as por vírgula em uma única declaração de box-shadow. Você pode gerar diferentes sombras na ferramenta e combiná-las manualmente no seu código para efeitos de profundidade mais ricos.
Meus ajustes são enviados para algum servidor?
Não. Toda a renderização e a geração do CSS ocorrem dentro da própria página do navegador, sem qualquer envio de dados externos. Você pode experimentar quantas variações de sombra quiser sem depender de conexão.
Fontes

Fontes oficiais

Tabelas, leis e referências consultadas para fundamentar esta ferramenta.

  1. Documentação técnicaVigenteMDN Web Docs · Mozilla

    Web Standards

    Referência mais consultada do mundo para padrões da web — APIs JavaScript, HTML, CSS e protocolos do navegador.

  2. Standard internacionalVigenteWorld Wide Web Consortium (W3C)

    W3C Standards

    Organização que define os padrões oficiais da web — HTML, CSS, ARIA, e demais especificações implementadas por todos os navegadores.

  3. Standards internacionaisDatatrackerIETF · Internet Engineering Task Force

    RFC Documents

    Repositório oficial dos Request for Comments (RFCs) — documentos técnicos que definem protocolos e formatos da internet (HTTP, JSON, URI, UUID, etc).

Metodologia — esta ferramenta consulta as tabelas e legislação vigentes nas fontes acima. As regras são atualizadas conforme novas instruções normativas são publicadas pelos órgãos competentes.

Última verificação editorial: junho de 2026.

Compartilhe

§ Como usar

Como gerar Box Shadow CSS visualmente

Crie sombras de qualquer profundidade (subtle a dramatic) com preview e código pronto para copiar.

  1. Configure offsets

    X (horizontal), Y (vertical), Blur (suavidade), Spread (espessura). Drag os sliders para feedback visual instantâneo.

  2. Escolha cor da sombra

    Padrão preto com baixa opacidade (sombra natural). Para sombra colorida 'glow', escolha cor da marca.

  3. Adicione múltiplas camadas (opcional)

    Sombras profissionais usam 2-3 camadas (close-shadow + ambient-shadow). Stack para profundidade real.

  4. Copie o CSS

    Pronto para colar. Inclui inset opcional (sombra interna) e prefixos cross-browser.

§ Por que usar

Benefícios

  • Múltiplas camadas (sombras profissionais)

    Sites premium (Stripe, Vercel, Linear) usam 2-3 camadas de sombra. Stack para profundidade real.

  • Preview ao vivo

    Veja resultado conforme ajusta sliders. Iteração rápida sem context-switch para code editor.

  • Código CSS pronto para colar

    Inclui prefixos -webkit/-moz para máxima compatibilidade cross-browser.

  • Suporta inset (sombra interna)

    Útil para inputs (efeito 'pressed'), cards com profundidade interna, ou efeito 'engraved'.

§ Para quem é

Casos de uso

  1. Frontend developer estilizando UI

    Cria sombras profissionais (multi-layer) para cards e botões de produto premium.

  2. Designer convertendo Figma para código

    Replica sombra do design em CSS exato, sem aproximação visual.

  3. Iniciante aprendendo CSS

    Experimenta valores e vê resultado em tempo real. Aprendizado mais rápido que documentação.

Sobre Gerador Box Shadow CSS

Crie sombras CSS visualmente com preview em tempo real.

Por que usar

Diferenciais reais — sem promessa vazia.

Múltiplas camadas (sombras profissionais)
Sites premium (Stripe, Vercel, Linear) usam 2-3 camadas de sombra. Stack para profundidade real.
Preview ao vivo
Veja resultado conforme ajusta sliders. Iteração rápida sem context-switch para code editor.
Código CSS pronto para colar
Inclui prefixos -webkit/-moz para máxima compatibilidade cross-browser.
Suporta inset (sombra interna)
Útil para inputs (efeito 'pressed'), cards com profundidade interna, ou efeito 'engraved'.

Para quem é

Cenários reais de uso, por persona.

  • Frontend developer estilizando UI

    Cria sombras profissionais (multi-layer) para cards e botões de produto premium.

  • Designer convertendo Figma para código

    Replica sombra do design em CSS exato, sem aproximação visual.

  • Iniciante aprendendo CSS

    Experimenta valores e vê resultado em tempo real. Aprendizado mais rápido que documentação.

Como gerar Box Shadow CSS visualmente

Crie sombras de qualquer profundidade (subtle a dramatic) com preview e código pronto para copiar.

  1. Configure offsets

    X (horizontal), Y (vertical), Blur (suavidade), Spread (espessura). Drag os sliders para feedback visual instantâneo.

  2. Escolha cor da sombra

    Padrão preto com baixa opacidade (sombra natural). Para sombra colorida 'glow', escolha cor da marca.

  3. Adicione múltiplas camadas (opcional)

    Sombras profissionais usam 2-3 camadas (close-shadow + ambient-shadow). Stack para profundidade real.

  4. Copie o CSS

    Pronto para colar. Inclui inset opcional (sombra interna) e prefixos cross-browser.

§ Perguntas frequentes

Sobre esta ferramenta

A.

Use 2-3 camadas (não uma única sombra). Exemplo: sombra próxima sutil + sombra ambiente larga. A ferramenta permite empilhar — Stripe, Linear, Vercel todos usam multi-layer shadows.

Relacionadas

Ferramentas relacionadas

toolLayout.related_description