Gerador CSS Box Shadow
Crie belas sombras visualmente e copie o CSS.
Predefinições
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.25);
Como usar
- Arraste os controles deslizantes para ajustar deslocamento horizontal e vertical, desfoque, propagação e opacidade.
- Escolha uma cor de sombra e ative « inset » se necessário.
- Clique em « Adicionar camada de sombra » para empilhar várias sombras.
- Use uma predefinição como ponto de partida rápido.
- Clique em « Copiar o CSS » para colar o resultado na sua folha de estilo.
Perguntas frequentes
O que é box-shadow em CSS ?
A propriedade CSS box-shadow adiciona efeitos de sombra em torno de um elemento. Ela aceita valores para o deslocamento horizontal, o deslocamento vertical, o raio de desfoque, o raio de propagação e a cor.
Posso adicionar várias sombras ?
Sim. Clique em « Adicionar camada de sombra » para adicionar outra sombra. Várias sombras são separadas por vírgulas na saída CSS. Isso permite criar efeitos sobrepostos complexos.
Para que serve a palavra-chave inset ?
Adicionar « inset » faz a sombra aparecer dentro do elemento em vez de fora, criando uma sombra interna ou um efeito « afundado ».
Os cinco parâmetros do box-shadow
O box-shadow do CSS adiciona um ou mais efeitos de sombra projetada à caixa de borda de um elemento. A gramática é box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?, com várias sombras separadas por vírgulas. Cada parâmetro faz uma coisa específica:
- offset-x: distância que a sombra é deslocada horizontalmente. Positivo move para a direita; negativo move para a esquerda.
0centraliza horizontalmente. - offset-y: deslocamento vertical. Positivo move para baixo (imita uma iluminação vinda de cima, a convenção de UI mais comum). Negativo move para cima.
- blur-radius: até onde a borda da sombra se desvanece até ficar transparente. Implementado como uma convolução gaussiana; valores maiores produzem sombras mais suaves, maiores e mais difusas. Valores negativos são inválidos;
0produz uma borda dura e nítida. - spread-radius: aumenta (positivo) ou encolhe (negativo) a forma da sombra antes de o desfoque ser aplicado. Uma propagação positiva expande a sombra em todas as direções; uma negativa a contrai, permitindo confinar uma sombra a um lado da caixa.
- color: o padrão é
currentcolor(o próprio valor decolordo elemento, o que às vezes surpreende). As sombras de UI quase sempre usam um preto ou quase-preto com alpha baixo, dergba(0,0,0,0.05)argba(0,0,0,0.25): porque sombras de preto sólido parecem pesadas e artificiais. - a palavra-chave inset pinta a sombra dentro da caixa em vez de fora. Usada para estados de botão pressionado, «poços» de campos rebaixados e brilhos internos.
O navegador compõe uma lista de sombras da frente para trás: a primeira sombra listada é a mais próxima do observador, a última é a mais ao fundo. É a mesma ordenação de text-shadow e background, mas é o oposto de como a maioria das regras CSS cascateia, uma surpresa comum para autores iniciantes.
O sistema de elevação de duas sombras do Material Design
O Material Design do Google (lançado em maio de 2014; o Material Design 3 em 2021) define um sistema de elevação quantizado em que as superfícies de UI ficam em um de vários níveis em pixels independentes de densidade. A receita de sombra em cada nível usa duas sombras empilhadas:
- Umbra (sombra principal), menor, mais escura, representando a luz diretamente bloqueada sob a superfície. Deslocamento e desfoque curtos.
- Penumbra (sombra ambiente), maior e mais difusa, representando a luz dispersa que ricocheteia pelo ambiente. Deslocamento maior, desfoque maior, alpha mais claro.
No Material Design 2, os valores de elevação vão de 0dp (sem sombra) até 24dp; os cartões normalmente usam 1-2dp em repouso e animam para 8dp ao passar o mouse, enquanto as caixas de diálogo modais usam 24dp. O Material Design 3 condensou a escala para cinco Níveis nomeados (1 a 5) e acrescentou sobreposições com tonalidade além das sombras projetadas em temas escuros. A estrutura umbra-mais-penumbra continua sendo o modelo visual, e é por isso que o shadow-md do Tailwind vem como duas sombras empilhadas: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06).
Neumorfismo: a tendência que precisava de duas sombras opostas
O neumorfismo (uma junção de «new» e «skeuomorphism») explodiu em popularidade viral no fim de 2019 / início de 2020, depois que um post de dezembro de 2019 no Dribbble do designer ucraniano Alexander Plyuto, intitulado «Skeuomorph Mobile Banking», juntou dezenas de milhares de curtidas em semanas. A receita que o define são duas box-shadows em um elemento com a mesma cor de fundo que o seu pai: uma sombra mais escura embaixo à direita e uma sombra mais clara em cima à esquerda. O lado escuro simula a superfície recuando para longe de uma fonte de luz; o lado claro simula ela se erguendo em um realce no lado voltado para a luz. Inverter os deslocamentos (ou adicionar inset a ambas) cria uma aparência rebaixada/pressionada.
Ressalva honesta de acessibilidade: o neumorfismo tem sido muito criticado porque o contraste visual entre um elemento e o seu fundo é necessariamente muito baixo, eles compartilham uma cor. Botões e campos podem reprovar na WCAG 1.4.11 (Contraste Não Textual, AA, razão de 3:1 dos componentes de UI em relação às cores adjacentes). Os estados pressionado e não pressionado muitas vezes só se distinguem pela direção sutil da sombra, o que os leitores de tela não conseguem transmitir e o que é invisível para qualquer pessoa com baixa visão, daltonismo ou reflexo na tela. Use o estilo com moderação em superfícies decorativas, não em controles primários.
box-shadow vs. filter: drop-shadow()
O CSS Filter Effects define uma alternativa, filter: drop-shadow(<x> <y> <blur> <color>): que parece visualmente semelhante, mas com uma diferença crítica. O box-shadow projeta uma sombra do retângulo da caixa de borda (arredondado por border-radius, se houver). O drop-shadow projeta uma sombra do canal alpha do elemento renderizado, incluindo filhos, PNGs transparentes, formas SVG com recortes, conteúdo mascarado. O motivo mais comum para escolher drop-shadow é que o elemento ao qual você quer aplicar a sombra não é um retângulo: um ícone PNG transparente, um logo SVG, um triângulo de balão de fala.
box-shadow | drop-shadow() | |
|---|---|---|
| Parâmetro de propagação | Sim | Não |
| Variante inset | Sim | Não |
| Múltiplas sombras | Sim (lista separada por vírgulas) | Sim (encadeamento de filtros) |
| Afeta os descendentes | Não | Sim (toda a subárvore) |
| Recorte | Pode se estender para fora de overflow:hidden | Confinado aos limites do filtro |
| Desempenho | Amigável ao compositor | Dispara uma passagem de filtro |
Notas de desempenho
A box-shadow é uma das propriedades CSS mais caras de renderizar em tempo real. O custo tem três fatores: o tamanho do kernel de desfoque (o desfoque gaussiano é uma convolução separável de duas passagens; dobrar o desfoque quadruplica o trabalho por pixel, então um desfoque de 100 pixels em um cartão grande pode derrubar a taxa de quadros de forma perceptível durante a rolagem), a área de superfície da sombra (o retângulo expandido pela propagação e ampliado ainda mais pelo desfoque é o que a GPU precisa rasterizar, as grandes sombras de sobreposição modal são o tipo mais caro), e as repinturas (animar box-shadow dispara uma repintura da região da sombra a cada quadro).
Recomendações práticas:
- Para animações de elevação ao passar o mouse, prefira animar
transform: translateY()eopacityem vez debox-shadow. Esses são acelerados por GPU e não disparam repintura. - Para trocar de sombra ao passar o mouse, declare ambas as sombras em um pseudoelemento com a maior em
opacity: 0, depois anime a opacidade do pseudoelemento. Isso troca as sombras sem animar o próprio kernel de desfoque: o «Shadow Tricks» (2017) de Tobias Ahlin é o texto de referência. will-change: transformpode sugerir ao navegador que promova um elemento à sua própria camada de composição. Use com moderação: promover muitos elementos desperdiça memória de GPU.- Evite box-shadow em elementos que contêm grandes quantidades de conteúdo rolável. Cada quadro de rolagem precisa repintar a sombra.
Acessibilidade
As sombras são decorativas no que diz respeito à árvore de acessibilidade (os leitores de tela as ignoram), mas têm implicações:
- WCAG 1.4.11 Contraste Não Textual (AA, 3:1). Se um cartão ou botão se distingue do seu fundo apenas por uma sombra, essa sombra define na prática a borda visual, e uma sombra fraca
rgba(0,0,0,0.05)sobre um fundo quase branco pode não atingir o limiar de 3:1. Muitos design systems combinam a sombra com uma borda sólida de 1px para garantir o contraste. - Indicadores de foco.
box-shadow: 0 0 0 3px <color>é a alternativa moderna aooutlinepadrão do navegador porque acompanha oborder-radius. O anel precisa atender à WCAG 2.4.7 Foco Visível, com no mínimo 2 pixels CSS de espessura e contraste de 3:1 em relação ao estado não focado e às cores adjacentes. - Forced-colors / Alto Contraste do Windows. No modo
forced-colors: active, os navegadores ignoram a maioria das cores CSS e recolorem o conteúdo com a paleta do sistema do usuário. As box-shadows são removidas ou reduzidas; os estados de UI devem sempre ter um indicador que não seja de sombra (mudança de borda, mudança de cor, ícone, rótulo de texto) para esses usuários. - Movimento reduzido. Usuários com
prefers-reduced-motion: reducenão devem ver grandes animações de sombra ao passar o mouse ou rolar. Envolva as transições animadas em uma media query e mantenha a sombra de repouso para esses usuários.
Receitas rápidas
| Efeito | CSS |
|---|---|
| Elevação sutil de cartão | 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) |
| Cartão moderno suave | 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06) |
| Elevação pesada de modal | 0 25px 50px -12px rgba(0,0,0,0.25) |
| Carimbo nítido de 1px | 0 0 0 1px rgba(0,0,0,0.05) |
| Anel de foco (3px) | 0 0 0 3px rgba(59,130,246,0.5) |
| Campo «poço» com inset | inset 0 2px 4px 0 rgba(0,0,0,0.06) |
| Halo de brilho | 0 0 20px 4px rgba(99,102,241,0.6) |
Mais perguntas
Por que a minha sombra está sendo cortada?
Quase sempre porque um elemento ancestral tem overflow: hidden. A sombra se estende além da caixa de borda, mas é cortada na borda do ancestral. Duas soluções: mova a sombra para o próprio ancestral, ou use um elemento de envoltório sem recorte de overflow. O filter: drop-shadow() não tem esse problema, mas tem as suas próprias compensações.
Ainda devo usar prefixos de fornecedor como -webkit-box-shadow?
Não. O box-shadow sem prefixo tem suporte universal desde cerca de 2012. Os prefixos de fornecedor são puro ruído no código de 2026 e devem ser removidos. As bibliotecas de reset CSS do início dos anos 2010 muitas vezes os incluíam de forma defensiva; o código moderno pode descartá-los com segurança.
Como aplico uma sombra ao texto, e não à caixa?
Use text-shadow, que tem a mesma sintaxe de deslocamento / desfoque / cor, mas sem propagação nem inset. Para sombras com o formato dos glifos em texto estilizado (por exemplo, texto com gradiente via background-clip: text), o filter: drop-shadow() no elemento pai é a ferramenta certa: o box-shadow projetaria uma sombra retangular atrás dos glifos.
Por que a minha sombra 0 0 0 2px não parece suave?
Porque o terceiro valor (raio de desfoque) é 0. Uma sombra só de propagação, sem desfoque, produz um contorno sólido e nítido, que é exatamente o que você quer para anéis de foco e truques de «contorno falso», mas não para uma elevação suave. Adicione algum desfoque: 0 0 4px 0 rgba(0,0,0,0.2).
Algo é enviado a um servidor?
Não. A pré-visualização é renderizada de novo no seu navegador conforme você arrasta os controles deslizantes; a string CSS é gerada localmente; copiar escreve na sua área de transferência. A página funciona offline depois de carregada.