Softonic

Gerador de Sombra de Caixa CSS

Etapa 1 / 2
Próximo

Crie uma regra box-shadow por vez: defina os deslocamentos horizontal e vertical, o desfoque, o espalhamento, a cor e o inset opcional, e copie o resultado. Sombras reais geralmente precisam de duas ou três camadas, então gere cada camada separadamente e junte as regras com uma vírgula.

Como projetar uma sombra de caixa

  1. 1

    Defina os valores da sombra

    Deslocamento horizontal, deslocamento vertical, raio de desfoque, espalhamento e cor com opacidade.

  2. 2

    Alterne inset

    Vire a sombra para inset a fim de obter uma sombra interna, útil para botões pressionados e efeitos de cavidade.

  3. 3

    Escolha a cor

    Preto com baixa opacidade é o clássico. Sombras coloridas (correspondendo ao tom do elemento, mais escuras) parecem mais naturais.

  4. 4

    Copie o CSS

    Copie a regra de sombra individual e cole-a na sua folha de estilos. Para sombras em camadas, gere cada camada separadamente e combine as regras com uma vírgula.

A sintaxe box-shadow

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];
  • x-offset: positivo = direita, negativo = esquerda.
  • y-offset: positivo = baixo, negativo = cima.
  • blur: 0 = borda dura, maior = mais suave. O tamanho visível é aproximadamente 1.5x o desfoque além do elemento.
  • spread: tamanho extra além do elemento. Positivo aumenta a sombra; negativo a diminui (útil para halos sutis).
  • colour: suporta qualquer cor CSS. rgba(0, 0, 0, 0.15) é o básico.
  • inset: palavra-chave que inverte a sombra dentro do elemento.

Sombras em camadas parecem reais

Este gerador produz uma regra de sombra por vez; para construir uma sombra em camadas, gere cada camada separadamente e combine as regras com uma vírgula.

Uma sombra com 0 0 40px parece embaçada. Duas sombras, uma pequena e nítida perto do elemento e uma maior e suave mais distante, imitam como a luz real se dispersa.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

A primeira linha dá a sombra de contato apertada; a segunda a suave ambiente. Este único padrão cobre 80% da UI estilo cartão.

Sistemas de elevação

O Material Design usa 6 níveis de elevação, cada um com uma pilha de sombras diferente. Simplificado:

Elevação Sombra
1 (repouso) 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)
2 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23)
3 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23)
4 (elevado) 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22)
5 (flutuante) 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22)

Escolha uma por função de elevação e use-a consistentemente.

Sombras coloridas parecem mais naturais

Sombras pretas puras parecem artificiais porque sombras reais são tingidas pela superfície abaixo delas. Tente:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);
  • um azul cinza frio em vez de preto puro. Em fundos quentes, use um tom mais quente.

Desempenho

Sombras de caixa são pintadas em cada repintura. Sombras grandes e pesadas em muitos elementos podem desacelerar a rolagem. Mitigações:

  • Use transform: translateZ(0) no elemento para forçar uma camada composta.
  • Substitua sombras complexas por filter: drop-shadow() apenas se precisar que a sombra siga um clip-path (é mais lenta em geral).
  • Limite sombras em elementos que re-renderizam frequentemente.

Inset para estados pressionados

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Sombras inset simulam uma aparência rebaixada, o botão parece pressionado na superfície. Combine com um pequeno transform: translateY(1px) para um clique tátil.

Perguntas frequentes

Geralmente porque o desfoque está muito baixo ou o espalhamento está muito alto. Uma sombra de borda dura sem desfoque parece um elemento duplicado. Aumente o desfoque (20-30px é um ponto de partida comum) e mantenha o espalhamento em 0 ou valores negativos muito pequenos.

A sombra de caixa segue a border-box do elemento, incluindo border-radius, então cartões arredondados recebem sombras arredondadas automaticamente. Para formas de clip-path, a sombra de caixa não segue o clip; use filter: drop-shadow() em vez disso.

Desloque a sombra fortemente na direção escolhida e use um espalhamento negativo para esconder o lado oposto. Ou use duas sombras, uma visível no lado alvo, outra com espalhamento negativo para “comer” o derramamento indesejado.

Não há limite rígido, mas cada sombra é outra passagem de pintura. Três a quatro camadas é o teto prático; mais do que isso e você deve considerar usar uma imagem de fundo ou SVG em vez disso.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas