box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1);

Gerador Online Grátis de Sombra de Caixa CSS — Construtor de Sombra Visual

Projete sombras de caixa CSS bonitas visualmente com uma pré-visualização em tempo real. Este gerador de sombra de caixa gratuito suporta múltiplas camadas, presets, sombras internas e gera código CSS pronto para uso instantaneamente.

O que é um Gerador de Sombra de Caixa?

Um gerador de sombra de caixa é uma ferramenta visual que ajuda designers e desenvolvedores da web a criar valores de box-shadow CSS sem escrever manualmente valores em pixels. Em vez de adivinhar números e recarregar seu navegador, você ajusta barras de rolagem e vê o resultado em tempo real.

A propriedade CSS box-shadow adiciona efeitos de sombra em torno do quadro de um elemento. É uma das propriedades CSS mais comumente usadas para criar profundidade, elevação e hierarquia visual em interfaces da web modernas.

Como Usar Este Gerador de Sombra de Caixa

1. Escolha um preset — Comece com uma sombra sutil, média ou forte, ou comece do zero.
2. Ajuste os sliders — Controle o deslocamento X, deslocamento Y, desfoque, expansão, cor e opacidade.
3. Ative o modo interno — Alterne entre sombra externa e sombra interna.
4. Adicione camadas — Empilhe múltiplas sombras para efeitos complexos.
5. Personalize a pré-visualização — Mude as cores de fundo e caixa para combinar com seu design.
6. Copie o CSS — Clique no botão de cópia e cole o código em seu stylesheet.

Recursos Principais

Recurso	Benefício
Pré-visualização em tempo real	Veja as alterações instantaneamente ao ajustar os sliders
6 presets	Início rápido com estilos de sombra comuns
Múltiplas camadas	Empilhe sombras para efeitos complexos e realistas
Suporte a sombras internas	Crie sombras internas para elementos afundados
Seletor de cor	Controle total sobre a cor da sombra
Controle de opacidade	Ajuste finamente a transparência da sombra
Copiar para área de transferência	Exportação de CSS com um clique

Entendendo a Sombra de Caixa CSS

Sintaxe

A propriedade CSS box-shadow segue esta sintaxe:

box-shadow: [inset] offsetX offsetY blur spread color;

Valor	Descrição	Exemplo
inset	(Opcional) Torna a sombra interna	inset
offsetX	Deslocamento horizontal — positivo = direita, negativo = esquerda	4px
offsetY	Deslocamento vertical — positivo = para baixo, negativo = para cima	4px
blur	Raio de desfoque — maior = sombra mais suave	12px
spread	Expansão de tamanho — positivo = maior, negativo = menor	0px
color	Cor da sombra com transparência alfa	rgba(0,0,0,0.1)

Múltiplas Sombras

Você pode empilhar múltiplas sombras separando-as com vírgulas:

box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.05);

Isso cria uma sombra de duas camadas: uma sombra mais próxima e escura do elemento, e uma sombra mais suave e leve que se estende mais longe — produzindo um efeito de profundidade mais realista.

Comparação de Estilos de Sombra

Estilo	CSS	Caso de Uso
Sutil	0 1px 3px rgba(0,0,0,0.08)	Cartões, itens de lista
Médio	0 4px 6px rgba(0,0,0,0.1)	Botões, modais
Forte	0 10px 15px rgba(0,0,0,0.15)	Diálogos, popovers
Brilho	0 0 20px rgba(59,130,246,0.4)	Estados de foco, CTAs
Interno	inset 0 2px 4px rgba(0,0,0,0.1)	Inputs, poços
Rígido	4px 4px 0 rgba(0,0,0,0.25)	UI retrô/brutalista

Casos de Uso no Mundo Real

Elevação no Material Design

O Material Design usa sombras para indicar níveis de elevação. Um cartão no nível 1 usa 0 1px 3px rgba(0,0,0,0.12), enquanto um diálogo no nível 4 usa 0 12px 17px rgba(0,0,0,0.14).

Efeitos de Hover

Profunde a sombra ao passar o mouse para criar um efeito de "levantamento":

.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }

Estados de Foco

Use um brilho colorido para indicadores de foco acessíveis:

input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }

Neumorfismo

Combine sombras internas e externas com a mesma cor do fundo para um visual suave e extrudado.

Dicas para Sombras Melhores

Dica	Explicação
Mantenha o desfoque sutil	Um desfoque excessivo parece natural. Comece com 4–12px para a maioria dos elementos da interface
Use baixa opacidade	Sombras na vida real não são totalmente opacas. 5–15% de opacidade parece mais natural
Combine com seu fundo	Em fundos escuros, use cores de sombra mais claras ou brilhos coloridos em vez de preto
Camadas para realismo	Uma sombra de duas camadas (apertada + suave) cria um efeito mais realista
Evite sombras muito fortes	Evite sombras muito fortes que podem parecer artificiais

Perguntas Frequentes

Qual a diferença entre box-shadow e drop-shadow?

box-shadow é uma propriedade CSS específica para criar sombras em torno de elementos com bordas definidas, enquanto drop-shadow é uma filtração de imagem que pode ser aplicada a qualquer elemento, incluindo textos e imagens. drop-shadow é mais flexível, mas box-shadow é mais eficiente para elementos com bordas.

Como posso criar uma sombra com bordas arredondadas?

Use a propriedade border-radius junto com box-shadow. Exemplo:

.rounded-box {
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

Como posso fazer uma sombra com transição suave?

Use a propriedade transition junto com box-shadow. Exemplo:

.transition-box {
  transition: box-shadow 0.3s ease-in-out;
}
.transition-box:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}