CSS-only text marquee
![](/video-images/css-text-marquee.webp)
Watch tutorial
JavaScript
TypeScript
CSS
TailwindCSS
Accessibility
React
Angular
JavaScript
TypeScript
CSS
TailwindCSS
Accessibility
React
Angular
You find the fadeout mask recipe linked at the bottom of this page!
1<div class="marquee-text">2 <div class="marquee-text-track">3 <p>JavaScript</p>4 <p>TypeScript</p>5 <p>CSS</p>6 <p>TailwindCSS</p>7 <p>Accessibility</p>8 <p>React</p>9 <p>Angular</p>10 <p aria-hidden="true">JavaScript</p>11 <p aria-hidden="true">TypeScript</p>12 <p aria-hidden="true">CSS</p>13 <p aria-hidden="true">TailwindCSS</p>14 <p aria-hidden="true">Accessibility</p>15 <p aria-hidden="true">React</p>16 <p aria-hidden="true">Angular</p>17 </div>18</div>
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 var(11 --direction,12 forwards13 );14}15
16.marquee-text p {17 border: 1px solid white;18 background-color: #141414;19 border-radius: 999px;20 padding: 1rem 2.5rem;21}22
23@keyframes marquee-move-text {24 to {25 transform: translateX(-50%);26 }27}
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 is10s
.--direction
- The direction of the marquee. Default isforwards
. Can be set toreverse
to make the marquee go the other way.
Other interesting recipes