Using CSS masks to fadeout content

Some super interesting text or component, but faded out.

Variants:

Fadeout Horizontal Fadeout Vertical Fadeout Left Fadeout Right Fadeout Top Fadeout Bottom Fadeout Circular

Fadeout size

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
    transparent
8
  );
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
    transparent
18
  );
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
    transparent
58
  );
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.