Recipe

Using CSS masks to fadeout content

Now you see me, now you don't

Jeroen Reumkens PRO

CSS-only text marquee

1
/**
2
When copying this style to your own project,
3
be sure to add the below import line to activate tailwind v4
4
@ import "tailwindcss";
5
**/
6

7
.fadeout-horizontal {
8
  mask-image: linear-gradient(
9
    to right,
10
    transparent,
11
    black var(--fade-size, 5rem),
12
    black calc(100% - var(--fade-size, 5rem)),
13
    transparent
14
  );
15
}
16

17
.fadeout-vertical {
18
  mask-image: linear-gradient(
19
    to bottom,
20
    transparent,
21
    black var(--fade-size, 5rem),
22
    black calc(100% - var(--fade-size, 5rem)),
23
    transparent
24
  );
25
}
26

27
.fadeout-left {
28
  mask-image: linear-gradient(
29
    to right,
30
    transparent,
31
    black var(--fade-size, 5rem)
32
  );
33
}
34

35
.fadeout-right {
36
  mask-image: linear-gradient(
37
    to left,
38
    transparent,
39
    black var(--fade-size, 5rem)
40
  );
41
}
42

43
.fadeout-top {
44
  mask-image: linear-gradient(
45
    to bottom,
46
    transparent,
47
    black var(--fade-size, 5rem)
48
  );
49
}
50

51
.fadeout-bottom {
52
  mask-image: linear-gradient(
53
    to top,
54
    transparent,
55
    black var(--fade-size, 5rem)
56
  );
57
}
58

59
.fadeout-circular {
60
  mask-image: radial-gradient(
61
    circle,
62
    black calc(100% - var(--fade-size, 5rem)),
63
    transparent
64
  );
65
}

1
import { useState } from "react";
2
import type { CSSProperties } from "react";
3

4
export const App = () => {
5
  const [fadeout, setFadeout] = useState("fadeout-bottom");
6
  const [fadeSize, setFadeSize] = useState(5);
7

8
  return (
9
    <div>
10
      <div className="mx-auto mb-8 max-w-[400px]">
11
        <div
12
          className={`mask-component ${fadeout}`}
13
          style={{ "--fade-size": `${fadeSize}rem` } as CSSProperties}
14
        >
15
          <div className="rounded-2xl bg-gray-200 p-5 text-black">
16
            <div className="bg-gray-default mb-3 aspect-video rounded-xl"></div>
17
            <p>Some super interesting text or component, but faded out.</p>
18
          </div>
19
        </div>
20
      </div>
21

22
      <div className="rounded-2xl bg-gray-100/10 p-3 text-sm md:p-6 md:text-2xl">
23
        <p className="mb-3 text-center">Variants:</p>
24
        <div className="mask-toggles mb-6 flex flex-wrap justify-center gap-3 overflow-hidden text-black *:cursor-pointer *:rounded-xl *:bg-neutral-200 *:p-3 *:transition-colors *:duration-300 [&_:has(:checked)]:bg-black [&_:has(:checked)]:text-white [&_input]:absolute [&_input]:-left-[100vw]">
25
          <label htmlFor="fadeout-horizontal">
26
            <input
27
              type="radio"
28
              value="fadeout-horizontal"
29
              name="fadeout"
30
              id="fadeout-horizontal"
31
              checked={fadeout === "fadeout-horizontal"}
32
              onChange={() => setFadeout("fadeout-horizontal")}
33
            />
34
            Fadeout Horizontal
35
          </label>
36

37
          <label htmlFor="fadeout-vertical">
38
            <input
39
              type="radio"
40
              value="fadeout-vertical"
41
              name="fadeout"
42
              id="fadeout-vertical"
43
              checked={fadeout === "fadeout-vertical"}
44
              onChange={() => setFadeout("fadeout-vertical")}
45
            />
46
            Fadeout Vertical
47
          </label>
48

49
          <label htmlFor="fadeout-left">
50
            <input
51
              type="radio"
52
              value="fadeout-left"
53
              name="fadeout"
54
              id="fadeout-left"
55
              checked={fadeout === "fadeout-left"}
56
              onChange={() => setFadeout("fadeout-left")}
57
            />
58
            Fadeout Left
59
          </label>
60

61
          <label htmlFor="fadeout-right">
62
            <input
63
              type="radio"
64
              value="fadeout-right"
65
              name="fadeout"
66
              id="fadeout-right"
67
              checked={fadeout === "fadeout-right"}
68
              onChange={() => setFadeout("fadeout-right")}
69
            />
70
            Fadeout Right
71
          </label>
72

73
          <label htmlFor="fadeout-top">
74
            <input
75
              type="radio"
76
              value="fadeout-top"
77
              name="fadeout"
78
              id="fadeout-top"
79
              checked={fadeout === "fadeout-top"}
80
              onChange={() => setFadeout("fadeout-top")}
81
            />
82
            Fadeout Top
83
          </label>
84

85
          <label htmlFor="fadeout-bottom">
86
            <input
87
              type="radio"
88
              value="fadeout-bottom"
89
              name="fadeout"
90
              id="fadeout-bottom"
91
              checked
92
              onChange={() => setFadeout("fadeout-bottom")}
93
            />
94
            Fadeout Bottom
95
          </label>
96

97
          <label htmlFor="fadeout-circular">
98
            <input
99
              type="radio"
100
              value="fadeout-circular"
101
              name="fadeout"
102
              id="fadeout-circular"
103
              checked={fadeout === "fadeout-circular"}
104
              onChange={() => setFadeout("fadeout-circular")}
105
            />
106
            Fadeout Circular
107
          </label>
108
        </div>
109

110
        <div className="mb-6 flex justify-center max-md:w-full">
111
          <label className="flex items-center justify-center gap-3 rounded-2xl bg-white p-3 text-black max-md:w-full max-md:flex-col">
112
            Fadeout size
113
            <input
114
              className="mask-range"
115
              type="range"
116
              min="1"
117
              max="50"
118
              value="5"
119
              onChange={(e) => setFadeSize(Number(e.target.value))}
120
            />
121
          </label>
122
        </div>
123
      </div>
124
    </div>
125
  );
126
};

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.