Gerador de sombra CSS (box-shadow)

Ajuste deslocamento, desfoque, espalhamento, cor e opacidade com controles deslizantes para gerar um box-shadow de CSS com pré-visualização ao vivo. Copie o código gerado com um clique.

Dicas de uso

  • Você pode digitar valores exatos nos campos numéricos em vez de arrastar os controles deslizantes quando precisar de precisão.
  • Ative o "inset" para desenhar a sombra dentro do elemento, criando um efeito afundado em vez de elevado.
  • Aumentar o spread expande todo o contorno da sombra, enquanto aumentar o blur suaviza e difunde as bordas; combine os dois para obter texturas diferentes.
  • Reduzir a opacidade deixa a sombra mais leve e natural, o que ajuda quando elementos se sobrepõem a fundos coloridos.
  • O CSS gerado pode ser colado diretamente na sua folha de estilos; combina especialmente bem com efeitos de hover em botões e cartões.

Perguntas frequentes

O raio de desfoque (blur) controla o quão suave a borda da sombra parece: um valor maior espalha o degradê por uma área mais ampla. Já o raio de espalhamento (spread) altera o tamanho da própria forma da sombra: valores positivos a tornam maior que o elemento e valores negativos a encolhem. Combinar os dois permite ajustar com precisão a textura da sombra.

A palavra-chave inset desenha a sombra dentro da borda do elemento em vez de fora dela. Enquanto um box-shadow normal faz o elemento parecer flutuar sobre a página, o inset faz com que pareça afundado ou embutido, algo bastante usado para estilizar a borda de campos de formulário.

A propriedade box-shadow do CSS aceita uma lista de sombras separadas por vírgula, permitindo sobrepor várias para um efeito mais tridimensional. Esta ferramenta foca em gerar uma única sombra para simplicidade; se precisar de várias camadas, você pode adicionar manualmente valores separados por vírgula ao CSS gerado.

box-shadow é uma propriedade CSS padrão suportada por todos os navegadores modernos, incluindo o Internet Explorer 9 e versões posteriores. Prefixos de fornecedor como -webkit- e -moz- já foram necessários, mas hoje a propriedade funciona em qualquer lugar sem prefixo.

Uma sombra preta totalmente opaca (0% de transparência) pode parecer artificial ou intensa demais dependendo da cor de fundo. Reduzir a opacidade para criar um preto ou cinza semitransparente produz uma sombra mais suave que se mistura naturalmente com qualquer fundo.
ツールくん

Curiosidade — como o box-shadow mudou a expressividade do design web

Antes de o box-shadow ser padronizado no CSS3, criar uma sombra na web geralmente significava pré-renderizá-la em uma imagem de fundo com um editor gráfico, ou simulá-la empilhando vários elementos div com fundos em gradiente. Mesmo um pequeno ajuste na forma ou suavidade da sombra exigia refazer a imagem, o que tornava a iteração de design lenta e cara.

Quando os navegadores começaram a implementar o box-shadow como parte do CSS3 por volta de 2009, uma sombra passou a ser gerada com uma única declaração CSS. Não eram mais necessários recursos de imagem, as páginas ficaram mais leves para carregar, e as sombras mantinham sua forma corretamente mesmo quando o layout se adaptava de forma responsiva.

Quando o Google apresentou o Material Design em 2014, construiu o conceito de "elevation" sobre o box-shadow: cada elemento recebe uma altura no eixo Z, e elementos posicionados mais acima projetam sombras maiores e mais escuras. Isso deu a interfaces antes planas uma sensação de profundidade e hierarquia, uma ideia que ainda influencia muitos sistemas de design hoje.

Mais ferramentas nesta categoria