Recipe

CSS-only text marquee

Bringing back some nostalgia

Jeroen Reumkens PRO

1
export const App = () => {
2
  return (
3
    <div className="wrapper fadeout-horizontal">
4
      <div className="marquee-text">
5
        <div className="marquee-text-track">
6
          <p>JavaScript</p>
7
          <p>TypeScript</p>
8
          <p>CSS</p>
9
          <p>TailwindCSS</p>
10
          <p>Accessibility</p>
11
          <p>React</p>
12
          <p>Angular</p>
13
          <p aria-hidden="true">JavaScript</p>
14
          <p aria-hidden="true">TypeScript</p>
15
          <p aria-hidden="true">CSS</p>
16
          <p aria-hidden="true">TailwindCSS</p>
17
          <p aria-hidden="true">Accessibility</p>
18
          <p aria-hidden="true">React</p>
19
          <p aria-hidden="true">Angular</p>
20
        </div>
21
      </div>
22
    </div>
23
  );
24
};

1
.marquee-text {
2
  overflow: clip;
3
}
4

5
.marquee-text-track {
6
  display: flex;
7
  padding-left: 4.8rem;
8
  gap: 4.8rem;
9
  width: max-content;
10
  animation: marquee-move-text var(--speed, 10s) linear infinite
11
    var(--direction, forwards);
12
}
13

14
.marquee-text p {
15
  border: 1px solid white;
16
  background-color: #141414;
17
  border-radius: 999px;
18
  padding: 1rem 2.5rem;
19
}
20

21
@keyframes marquee-move-text {
22
  to {
23
    transform: translateX(-50%);
24
  }
25
}
26

27
/* This wrapper div is only there so we know for sure we have enough text to fill your screen.
28
   If you want to have this marquee loop on devices with a very large width, you simply need to add more text.*/
29
.wrapper {
30
  max-width: 800px;
31
  margin: 0 auto;
32
  color: #fff;
33
}
34

35
.fadeout-horizontal {
36
  mask-image: linear-gradient(
37
    to right,
38
    transparent,
39
    black 5rem,
40
    black calc(100% - 5rem),
41
    transparent
42
  );
43
}

Marquees have been a part of the web for decades. Sadly we can’t use the <marquee> element anymore nowadays. So we have to recreate our own version of it!

How it works

The CSS based marquee makes the impression of an endlessly looping text, by duplicating its contents, and swapping the animation back to the start exactly halfway.

Because of this it is important to have the content at least duplicated once. And if you’re using the same word multiple times, you should always use an even amount. Otherwise the midpoint of the animation won’t be the same as the start.

Sounds confusing? Make sure to check the tutorial on CSS text marquees where I explain it in more detail.

Configuration

By default the marquee uses two CSS variables, so you can reuse the marquee without changing the CSS.

--speed - The speed of the marquee. Default is 10s.
--direction - The direction of the marquee. Default is forwards. Can be set to reverse to make the marquee go the other way.

Other interesting recipes

CSS FREE Recipe Using CSS masks to fadeout content

View recipe

CSS FREE Recipe CSS-only logo marquee

View recipe