Exemplos de box-shadow CSS: 40 sombras para copiar
Exemplos de box-shadow CSS
Exemplos de box-shadow CSS: 40 sombras para copiar como CSS ou Tailwind
40 exemplos originais de box-shadow que você pode visualizar e copiar como CSS ou como classe Tailwind: suaves, em camadas, só embaixo, inset, coloridas, para modo escuro e uma escala de elevação.
Uma sombra de caixa é escrita como box-shadow: deslocamento-x deslocamento-y desfoque expansão cor, com a palavra-chave inset opcional. Sombras suaves e realistas costumam empilhar duas ou três camadas com baixa opacidade, e uma sombra só embaixo usa um deslocamento y positivo com uma expansão negativa. Escolha qualquer um dos 40 exemplos abaixo e copie como CSS ou Tailwind.
As cinco partes de um valor de box-shadow
Parte
Exemplo
O que faz
deslocamento x
Move a sombra para a direita (positivo) ou para a esquerda (negativo)
deslocamento y
Move a sombra para baixo (positivo) ou para cima (negativo)
raio de desfoque
Suaviza a borda; não pode ser negativo; 0 é uma borda dura
raio de expansão
-6px
Aumenta (positivo) ou diminui (negativo) a sombra antes do desfoque
rgb(0 0 0 / 0.15)
Quando omitida, usa a cor do texto do elemento
Desenha a sombra dentro da borda em vez de fora
A maioria das listas de sombras mostra uma imagem e uma linha de CSS. Esta também explica por que uma sombra parece real ou falsa, traz uma escala de elevação coerente que você pode colocar no seu design system e mostra como manter as sombras visíveis em fundos escuros. Todos os exemplos são originais e rodam ao vivo no seu navegador.
Filtre a galeria por estilo, como em camadas, só embaixo, inset ou coloridas.
Cada card mostra a sombra sobre uma superfície real. Mude o fundo para escuro e veja como ela se comporta.
Clique em um card para copiá-lo. Use o seletor para escolher CSS puro ou uma classe arbitrária do Tailwind.
Para um produto inteiro, copie os tokens de elevação mais abaixo em vez de sombras avulsas.
Use uma expansão negativa com um deslocamento y maior para manter a sombra embaixo do elemento e longe das laterais.
Tinja as sombras com uma versão escura da cor do fundo em vez de preto puro, para um visual menos sujo.
Quando o efeito de elevar no hover ficar travado, anime a opacidade de um pseudo-elemento que carrega a sombra maior, em vez de animar o próprio box-shadow.
O box-shadow acompanha o border-radius, então cards arredondados ganham sombras arredondadas sem trabalho extra.
Perguntas frequentes
Como adiciono um box-shadow só embaixo?
Dê à sombra um deslocamento y positivo e uma expansão negativa de tamanho parecido com o desfoque, por exemplo box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3). A expansão negativa recolhe a sombra pela esquerda, pela direita e por cima, então só aparece a parte empurrada para baixo da borda inferior.
Como uso mais de uma sombra?
Separe as sombras com vírgulas. A primeira sombra da lista é pintada por cima das outras, então coloque primeiro a sombra de contato, curta e mais escura, e por último a sombra ambiente, larga e clara.
Por que a minha sombra some em um fundo escuro?
Uma sombra preta sobre uma página quase preta tem pouquíssimo contraste. Em temas escuros, use uma cor de superfície mais clara para os elementos elevados, adicione uma borda fina e clara ou um destaque inset de 1px e aumente a opacidade da sombra, em vez de depender só dela.
Qual é a diferença entre box-shadow e drop-shadow()?
O box-shadow segue a caixa e o border-radius do elemento. O filter: drop-shadow() segue os pixels visíveis, então contorna PNGs transparentes e formas SVG, mas não tem valor de expansão nem opção inset.
Como escrevo uma sombra personalizada no Tailwind?
Use um valor arbitrário com underscores no lugar dos espaços, como shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2)]. A escala nativa vai de shadow-2xs a shadow-2xl, e inset-shadow-sm e companhia cobrem as sombras internas.
Por que sombras em camadas parecem mais reais
Objetos reais projetam dois tipos de sombra ao mesmo tempo: uma pequena e escura bem onde tocam a superfície e outra larga e clara, da luz que se espalha pelo ambiente. Uma única sombra desfocada tenta ser as duas coisas e acaba parecendo um halo cinza.
Empilhar de duas a quatro camadas, cada uma com mais ou menos o dobro do deslocamento e do desfoque da anterior e com opacidade menor, imita essa mistura. O custo é pequeno, mas valores de desfoque muito grandes em muitos elementos podem deixar a rolagem lenta em aparelhos fracos, então reserve as sombras pesadas para poucas superfícies elevadas.
Sombras como escala, não como peça avulsa
Um produto parece coerente quando cada elemento elevado escolhe de uma escada curta: cards em repouso, cards em hover, dropdowns, diálogos. Guarde cada degrau como uma custom property e reutilize, assim mudar a direção da luz depois exige editar um só lugar.
Faça o deslocamento y crescer mais rápido que o x, que fica em zero para uma fonte de luz diretamente acima. Misturar direções de luz entre componentes é uma das formas mais rápidas de fazer uma interface parecer montada com peças soltas.
Box-shadow só embaixo
Uma expansão negativa encolhe a sombra por todos os lados, e o deslocamento y a empurra para baixo. Mantenha a expansão perto do valor negativo do desfoque para que nada vaze pelas bordas esquerda e direita.
Três sombras só embaixo
Da esquerda: uma borda curta, uma queda mais suave e a linha fina usada sob headers fixos.
Uma escala de elevação reutilizável
Cinco degraus atendem à maioria das interfaces. Cada um dobra o deslocamento e o desfoque do anterior e mantém uma camada de contato curta por baixo.
Os componentes usam var(--shadow-2) e nunca escrevem uma sombra fixa no código. O bloco escuro troca por uma borda sutil mais um preto mais profundo.
Sombra única vs sombra em camadas
Mesmo tamanho, realismo diferente
O card da esquerda usa um único desfoque grande. O da direita distribui a mesma escuridão em três camadas, o que parece uma elevação mais suave e natural.