Gerador de Box Shadow

Ajusta os controlos para criar uma sombra projetada ou interna na caixa de pré-visualização e depois copia o CSS box-shadow gerado. Controla o deslocamento horizontal e vertical, o raio de desfoque, o raio de expansão, a cor e a opacidade — sem precisar de decorar a ordem dos argumentos nem converter cores para rgba() à mão.

O que é esta ferramenta?

box-shadow é a propriedade CSS que desenha uma sombra atrás (ou dentro) de um elemento. Escrita à mão, exige até cinco valores em ordem — deslocamento horizontal, deslocamento vertical, raio de desfoque, raio de expansão e uma cor — além da palavra-chave opcional inset, tudo fácil de trocar ou de deixar demasiado subtil ou demasiado forte à primeira tentativa.

Esta ferramenta transforma isso em manipulação direta: arrasta um controlo, observa a sombra a mudar na caixa de pré-visualização em tempo real e copia o CSS exato quando ficar bem. O seletor de cor com um controlo de opacidade gera automaticamente um valor rgba() correto, já que sombras transparentes normalmente ficam melhor do que sombras totalmente opacas.

Por que usar?

A pré-visualização atualiza-se instantaneamente a cada ajuste — vês a sombra exata antes de fixares o código.
Controlo total sobre deslocamento-x, deslocamento-y, desfoque, expansão, cor e opacidade num só lugar.
Um clique adiciona inset para um aspeto pressionado/afundado em vez de uma sombra projetada flutuante.
Gera CSS pronto a colar, com a cor já convertida para rgba() na opacidade escolhida.
Funciona inteiramente no seu navegador — nada do que você configura é enviado para lado nenhum.
Grátis, sem registo, funciona em celular.

Como usar

Ajusta o deslocamento X e Y para posicionar a sombra — valores positivos movem-na para a direita/baixo, negativos para a esquerda/cima.
Aumenta o raio de desfoque para suavizar a margem da sombra; aumenta a expansão para tornar a sombra maior do que o próprio elemento.
Escolhe uma cor e ajusta a opacidade — as sombras mais realistas usam 15–40% de opacidade em vez de preto sólido.
Marca 'inset' se quiseres que a sombra apareça dentro do contorno do elemento em vez de atrás dele.
Copia o CSS gerado e cola-o na sua folha de estilos.

Exemplo

Entrada

Deslocamento: 0px, 10px · Desfoque: 20px · Expansão: 0px · Cor: preto a 35% de opacidade

Resultado

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Uma sombra suave diretamente abaixo do elemento sem deslocamento horizontal — um dos estilos de sombra mais comuns para cartões e botões.

Uma sombra vs. sombras em camadas

Esta ferramenta gera uma única camada de sombra, o que cobre a grande maioria dos casos reais — botões, cartões, modais e menus suspensos quase sempre usam apenas uma sombra. O CSS também suporta múltiplas sombras separadas por vírgulas no mesmo elemento para efeitos de profundidade mais elaborados (por exemplo, uma sombra escura e apertada por baixo de outra suave e larga), mas isso é um refinamento que podes adicionar à mão: gera uma sombra aqui, duplica a linha, ajusta o segundo conjunto de valores e une-os com uma vírgula.

Padrões comuns de box-shadow

Elevação subtil de cartão: deslocamento pequeno (0–4px), desfoque moderado (8–16px), preto a 10–20% de opacidade.
Modal/menu elevado: deslocamento (4–10px) e desfoque (20–30px) maiores, opacidade de 20–35% para uma sensação de flutuação mais forte.
Botão pressionado/interno: marca inset, usa um deslocamento pequeno e desfoque moderado para que a sombra pareça um vinco em vez de uma elevação.
Brilho colorido: escolhe uma cor da marca em vez de preto, aumenta a opacidade para 40–60% e aumenta ligeiramente a expansão para um efeito de brilho suave à volta dos botões.
Sombra nítida/dura: coloca o desfoque em 0 e a expansão em 0 para uma silhueta sólida e deslocada em vez de uma sombra suave.

Combinar com cantos arredondados

Sombras e cantos arredondados são usados constantemente em conjunto — cartões, botões e modais quase sempre combinam ambos. Usa o Gerador de Border Radius para arredondar os cantos do mesmo elemento e aplica as duas declarações CSS geradas em conjunto.

→ Gerador de Border Radius · Conversor de Unidades

Perguntas frequentes

Qual é a diferença entre desfoque e expansão?

O raio de desfoque suaviza a margem da sombra — valores mais altos fazem-na desvanecer-se mais gradualmente. O raio de expansão altera o tamanho da sombra antes do desfoque — uma expansão positiva torna a sombra maior do que o elemento de todos os lados, uma negativa encolhe-a. A maioria das sombras do dia a dia usa desfoque com a expansão em 0.

Porque usar rgba() em vez de uma cor hexadecimal simples para a sombra?

Uma sombra totalmente opaca parece dura e pouco realista — as sombras reais são sempre algo transparentes, deixando ver ligeiramente o que está por trás delas. O rgba() permite definir essa transparência diretamente, por isso esta ferramenta gera sempre a cor com um valor alfa em vez de um hexadecimal sólido.

O que faz a palavra-chave inset?

Sem inset, a sombra é desenhada fora do contorno do elemento, como se este estivesse flutuando acima da página. Com inset, a sombra é desenhada dentro do contorno, fazendo o elemento parecer pressionado ou afundado — usado normalmente para estados ativos/pressionados de botões ou campos de entrada.

Posso sobrepor mais do que uma sombra no mesmo elemento?

Sim — o box-shadow em CSS aceita uma lista separada por vírgulas, e os navegadores renderizam-nas pela ordem indicada (a primeira sombra fica por cima). Uma técnica comum combina uma sombra apertada e mais escura com outra mais larga e suave para uma profundidade mais realista do que qualquer uma sozinha.

O box-shadow afeta o layout ou só a aparência?

Só a aparência — o box-shadow nunca afeta o tamanho do elemento nem a posição dos elementos à volta, mesmo com valores grandes de desfoque ou expansão. Se a sombra parecer cortada visualmente, verifica se há overflow: hidden num elemento pai em vez dos valores da própria sombra.