Degrade Disfarçado Baixo

Como criar um degradê disfarçado baixo em CSS

Por que o degrade disfarçado baixo é útil

Um degradê disfarçado baixo serve para dar profundidade a um fundo ou card sem que o olho perceba imediatamente que existe uma transição de cor. O trampo é ajustar a opacidade e a extensão do gradiente de forma que ele sumisse na mistura com a cor base. Eu comecei a brincar com isso há alguns anos quando precisei colocar bordas inferior em cards de um painel administrativo que a equipe de design tinha aprovado como "flat". O designer queria uma sombra suave, mas o dev front-end não queria depender de box-shadow porque ia conflitar com o tema escuro.

A técnica passo a passo

Vamos começar pelo HTML básico. Um container simples: <div class="card">Conteúdo aqui</div>

Agora o CSS. O segredo está no pseudo-elemento ::after combinado com linear-gradient: .card {
position: relative;
background: #1a1a2e;
border-radius: 12px;
overflow: hidden;
}

.card::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to top, rgba(26, 26, 46, 0.8) 0%, transparent 100%);
pointer-events: none;
}

O valor de 60px na altura é um ponto de partida. Se seu card for mais alto, aumente para 80 ou 100px. A cor do gradiente deve ser exatamente a mesma cor de fundo do container, com opacidade variando de 0.6 a 0.9 na base até transparent no topo. Testei diferentes valores de opacidade em produção e percebi que 0.75 é o sweet spot para a maioria dos temas escuros.

Problema real que encontrei no campo

Num projeto de e-commerce, tive um card com imagem de fundo e precisava aplicar esse efeito por cima da imagem. O problema era que o gradiente padrão cobria parte da foto de forma visível e estragava a composição. A solução foi usar mix-blend-mode: multiply no pseudo-elemento, junto com um leve blur: .card-image::after {
background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 100%);
backdrop-filter: blur(2px);
mix-blend-mode: multiply;
}

Isso fez o degradê disfarçado baixo se fundir com a textura da imagem em vez de simplesmente sobrepor. Funcionou bem em Chrome e Firefox, mas no Safari antigo (antes da versão 15) o backdrop-filter não renderizava corretamente. Nesse caso, caí num fallback com uma div separada usando opacity reduzida.

Pegadinhas comuns

O erro mais frequente é esquecer overflow: hidden no container. Sem isso, o gradiente vaza pelas bordas arredondadas e estraga o visual. Outro problema é usar transparency demais — se o gradiente for muito leve, você não vê diferença nenhuma; se for muito forte, o efeito sai do disfarce. Também é importante testar em telas HDR. Em monitores com gamut mais amplo, cores que pareciam sutis na sua tela podem saltar na do cliente. Sempre peço para validar em pelo menos dois dispositivos diferentes antes de subir pra produção.

Quando não usar

Esse método não funciona bem em cards com bordas coloridas ou sombras fortes já aplicadas, porque o gradiente entra em conflito visual. Nesses casos, box-shadow com spread reduzido e cor escura com baixa opacidade é mais limpo. Também não recomendo para mobile antigo — backdrop-filter e pseudo-elements pesados podem causar jank em renders de scroll. O resultado final é algo que a maioria dos usuários não nota conscientemente, mas que faz a interface parecer mais polida. É esse tipo de detalhe que separa um layout amador de um que parece profissional. O degrade disfarçado baixo não precisa de muito código, só de ajuste fino nos valores de opacidade e altura conforme cada contexto.