Overview
Using CSS masks to fadeout content
Some super interesting text or component, but faded out.
Variants:
1.fadeout-horizontal {2 mask-image: linear-gradient(3 to right,4 transparent,5 black var(--fade-size, 5rem),6 black calc(100% - var(--fade-size, 5rem)),7 transparent8 );9}10
11.fadeout-vertical {12 mask-image: linear-gradient(13 to bottom,14 transparent,15 black var(--fade-size, 5rem),16 black calc(100% - var(--fade-size, 5rem)),17 transparent18 );19}20
21.fadeout-left {22 mask-image: linear-gradient(23 to right,24 transparent,25 black var(--fade-size, 5rem)26 );27}28
29.fadeout-right {30 mask-image: linear-gradient(31 to left,32 transparent,33 black var(--fade-size, 5rem)34 );35}36
37.fadeout-top {38 mask-image: linear-gradient(39 to bottom,40 transparent,41 black var(--fade-size, 5rem)42 );43}44
45.fadeout-bottom {46 mask-image: linear-gradient(47 to top,48 transparent,49 black var(--fade-size, 5rem)50 );51}52
53.fadeout-circular {54 mask-image: radial-gradient(55 circle,56 black calc(100% - var(--fade-size, 5rem)),57 transparent58 );59}
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.