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.
O que faz o box-shadow
A propriedade CSS `box-shadow` projeta uma sombra a partir de um elemento. O seu valor enumera o deslocamento horizontal, o vertical, o raio de desfoque, o raio de expansão e a cor, por esta ordem; mas **quatro números seguidos, com uma diferença entre desfoque e expansão que as palavras não conseguem transmitir**, tornam-na uma propriedade cansativa de escrever à mão. Esta ferramenta permite-lhe mover cada valor num cursor e ver o resultado de imediato.
O que define o carácter de uma sombra é a combinação mais do que as grandezas. **As sombras que se leem como naturais costumam manter o deslocamento pequeno, o desfoque amplo e a opacidade baixa**; se afastar o deslocamento e subir a opacidade, obtém algo de arestas duras, como se recortado e colado. Acrescentar `inset` projeta a sombra para dentro do elemento e produz um aspeto afundado. O código gerado copia-se com um clique e tudo corre no seu navegador.
Como construir uma sombra
- Defina os deslocamentos Isto determina a direção aparente da luz. Manter X em zero e Y ligeiramente positivo costuma ler-se com naturalidade.
- Ajuste o raio de desfoque É a suavidade do bordo da sombra. Valores altos espalham-na mais ampla e ténue.
- Ajuste o raio de expansão Engorda ou emagrece a sombra em si. **Ao contrário do desfoque, não altera a dureza do bordo.**
- Escolha a cor e a opacidade O preto semitransparente é a opção segura, mas um tom escuro próximo do fundo aplicado com suavidade integra-se melhor.
- Copie o código Cole o valor de `box-shadow` gerado diretamente na sua folha de estilos.
Dicas para aproveitar melhor
- 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.
Situações em que ajuda
Dar profundidade a cartões e botões
Basta uma sombra ténue para que fique bem mais claro que um elemento se pode premir.
Elevar modais e listas pendentes
A intensidade da sombra exprime a que altura o painel flutua sobre o conteúdo de trás.
Reproduzir a sombra de uma maqueta
Ao traduzir para CSS as definições de sombra de uma ferramenta de desenho, pode igualar os valores comparando ao mesmo tempo.
Criar um aspeto afundado
Com `inset` pode ensaiar tratamentos que façam parecer que um campo de entrada se afunda na página.
Termos do box-shadow explicados
- Deslocamento
- Quanto a sombra se desvia. O primeiro valor é horizontal e o segundo vertical; os positivos movem-na para a direita e para baixo.
- Raio de desfoque
- Quanto o bordo da sombra é suavizado. **A zero obtém uma sombra de contorno nítido.**
- Raio de expansão
- Quanto a sombra é aumentada. Um valor negativo encolhe-a.
- inset
- A palavra-chave que projeta a sombra dentro do elemento, produzindo um aspeto reentrante.
- Opacidade
- A densidade da sombra, dada como valor alfa de `rgba()`. **Uma sombra demasiado densa lê-se como pesada.**
- Sombras múltiplas
- Podem sobrepor-se várias sombras separadas por vírgulas. Uma sombra escura e cingida sobre outra ampla e ténue resulta convincente.
Perguntas frequentes
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.