Making a CSS Only Infinite Text Marquee

Try it yourself in our playground

Follow along with the tutorial, or just play around with the code. PRO members can fork this code and save it to their account.

Jeroen Reumkens PRO

CSS Only Text Marquee

1
export const App = () => {
2
  return (
3
    <div className="center-content">
4
      <div className="wrapper">
5
        <div className="marquee-text rotate-left fadeout-horizontal">
6
          <div className="marquee-text-track">
7
            <p>JavaScript</p>
8
            <p>TypeScript</p>
9
            <p>CSS</p>
10
            <p>TailwindCSS</p>
11
            <p>Accessibility</p>
12
            <p>React</p>
13
            <p>Angular</p>
14
            <p aria-hidden="true">JavaScript</p>
15
            <p aria-hidden="true">TypeScript</p>
16
            <p aria-hidden="true">CSS</p>
17
            <p aria-hidden="true">TailwindCSS</p>
18
            <p aria-hidden="true">Accessibility</p>
19
            <p aria-hidden="true">React</p>
20
            <p aria-hidden="true">Angular</p>
21
          </div>
22
        </div>
23
        <div className="marquee-text rotate-right fadeout-horizontal">
24
          <div
25
            style={
26
              {
27
                "--direction": "reverse",
28
                "--speed": "20s",
29
              } as React.CSSProperties
30
            }
31
            className="marquee-text-track"
32
          >
33
            <p>JavaScript</p>
34
            <p>TypeScript</p>
35
            <p>CSS</p>
36
            <p>TailwindCSS</p>
37
            <p>Accessibility</p>
38
            <p>React</p>
39
            <p>Angular</p>
40
            <p aria-hidden="true">JavaScript</p>
41
            <p aria-hidden="true">TypeScript</p>
42
            <p aria-hidden="true">CSS</p>
43
            <p aria-hidden="true">TailwindCSS</p>
44
            <p aria-hidden="true">Accessibility</p>
45
            <p aria-hidden="true">React</p>
46
            <p aria-hidden="true">Angular</p>
47
          </div>
48
        </div>
49
      </div>
50
    </div>
51
  );
52
};

1
:root {
2
  font-size: 62.5%;
3
  font-family: monospace;
4
}
5

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

16
.center-content {
17
  min-height: 100%;
18
  display: flex;
19
  align-items: center;
20
}
21

22
.wrapper {
23
  padding: 4.8rem 0px;
24
  width: 100%;
25
  color: white;
26
  font-size: 4rem;
27
}
28

29
.rotate-left {
30
  transform: rotate(-12deg);
31
}
32

33
.rotate-right {
34
  transform: rotate(12deg);
35
}
36

37
.marquee-text {
38
  overflow: clip;
39
}
40

41
.marquee-text-track {
42
  display: flex;
43
  padding-left: 4.8rem;
44
  gap: 4.8rem;
45
  width: max-content;
46
  animation: marquee-move-text var(--speed, 10s) linear infinite
47
    var(--direction, forwards);
48
}
49

50
.marquee-text p {
51
  border: 1px solid white;
52
  background-color: #141414;
53
  border-radius: 999px;
54
  padding: 1rem 2.5rem;
55
}
56

57
@keyframes marquee-move-text {
58
  to {
59
    transform: translateX(-50%);
60
  }
61
}
62

63
@media only screen and (max-width: 768px) {
64
  .wrapper {
65
    font-size: 1.2rem;
66
  }
67
}

The <marquee> tag was deprecated in HTML, but that didn’t stop designers from adding it back to their websites lately. And I’m honestly super excited about this relatively new trend, because I think they look super cool!

In this tutorial I will show you how to create a CSS only infinite text marquee. Make sure to watch the video at the top of this page.

Aesthethic purposes only

Please don’t hide any useful content for the user in a marquee. This way users will struggle in finding the information they need. Marquees are for aesthetic purposes only ❤️

Making a CSS Only Infinite Text Marquee

Try it yourself in our playground

Aesthethic purposes only

Can we Make A CSS Only Infinite Logo Marquee With ZERO Repeating Logos?