Overview

Using CSS masks to fadeout content

Some super interesting text or component, but faded out.

Variants:

Combining a linear gradient with a mask image in CSS, results in nice fadeout masks that you can add on top of any element you want.

These masks have a configurable CSS variable --fade-size that you can adjust to make the fadeout effect hide more or less of the content, without changing the class itself.