Esmaecimento de conteúdo com borda suave

Recursos da Web: Máscaras

Visão geral

Para aplicar um gradiente de transparência às bordas de um contêiner (por exemplo, para indicar que há mais conteúdo disponível para rolagem ou para esmaecer o texto), use a máscara CSS com um gradiente linear. Essa abordagem é melhor do que usar uma sobreposição semitransparente porque ela realmente esmaece o conteúdo, permitindo que o plano de fundo apareça naturalmente sem interferir na seleção de texto ou nos eventos de ponteiro.

Implementação

Para implementar um esmaecimento de borda suave:

Esmaecimento da borda inferior de um contêiner

Isso é útil para indicar que há mais conteúdo abaixo em uma área rolável.

.container {
  /* Enable scrolling */
  overflow-y: auto;
  
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  
  /* Standard property for modern browsers */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

Esmaecimento das bordas superior e inferior

Você pode usar um único gradiente com várias paradas de cor para esmaecer as duas bordas.

.dual-fade-container {
  /* Content is visible between 10% and 90% of the height */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

Estratégias de fallback

Se um navegador não for compatível com mask-image ou com a versão prefixada:

  • O conteúdo não vai desaparecer e será exibido com bordas nítidas.
  • Verifique se a interface ainda funciona e se o conteúdo pode ser lido sem o esmaecimento (aprimoramento progressivo).
  • Você pode usar uma sobreposição semitransparente como substituto, mas é preciso saber a cor do plano de fundo, e isso pode interferir na seleção de texto, a menos que pointer-events: none seja usado.
/* Fallback using an overlay for browsers that do not support masking */
@supports (not (mask-image: linear-gradient(to bottom, black, transparent))) and (not (-webkit-mask-image: linear-gradient(to bottom, black, transparent))) {
  .container {
    position: relative;
  }
  
  .container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    /* Fallback assumes a solid background color (e.g., white) */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Allow interaction with text underneath */
  }
}