Atenuación de contenido con bordes suaves

Descripción general

Para aplicar un gradiente de transparencia a los bordes de un contenedor (p.ej., para indicar que hay más contenido disponible para desplazarse o para atenuar el texto), usa el enmascaramiento de CSS con un gradiente lineal. Este enfoque es superior al uso de una superposición semitransparente porque, en realidad, atenúa el contenido en sí, lo que permite que el fondo se muestre de forma natural sin interferir con la selección de texto ni los eventos de puntero.

Implementación

Para implementar un desvanecimiento de borde suave, haz lo siguiente:

Atenuación del borde inferior de un contenedor

Esto es útil para indicar que hay más contenido debajo en un área desplazable.

.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%);
}

Atenuación de los bordes superior e inferior

Puedes usar un solo gradiente con varios elementos stop de color para atenuar ambos bordes.

.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%);
}

Estrategias de resguardo

Si un navegador no admite mask-image ni la versión con prefijo, haz lo siguiente:

• El contenido no se desvanecerá y se mostrará con bordes nítidos.
• Asegúrate de que la interfaz siga funcionando y de que el contenido se pueda leer sin el desvanecimiento (mejora progresiva).
• Puedes usar una superposición semitransparente como resguardo, pero ten en cuenta que requiere conocer el color de fondo y puede interferir con la selección de texto, a menos que se use pointer-events: none.

/* 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 */
  }
}