Scrolling Text Marquee Codes

Copy the code beneath the marquee you want to use and paste it into your HTML editor. Then replace TEXT with your own content. Note: The <marquee> tag is deprecated and may not display correctly in all browsers. To generate a modern, standards-compliant alternative, you can paste any marquee code into our Marquee → Modern CSS Converter. A modern CSS animation example is also included at the bottom of this page.

TEXT

<marquee>TEXT</marquee>

Right to Left Marquee

TEXT

<marquee direction="right">TEXT</marquee>

Left to Right Marquee

TEXT

<marquee behavior="alternate">TEXT</marquee>

Alternate Marquee

TEXT

<marquee direction="up">TEXT</marquee>

Up Marquee

TEXT

<marquee direction="down">TEXT</marquee>

Down Marquee

TEXT

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">TEXT</marquee></marquee>

Zig Zag Marquee

TEXT

<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">TEXT</marquee></marquee>

Alternating Zig Zag Marquee

>> TEXT <<

<marquee behavior="alternate" width="10%">>></marquee> TEXT <marquee behavior="alternate" width="10%"><<</marquee>

Highlight Text

<<<< TEXT >>>>

<marquee scrollamount="3" width="10%"><<<<</marquee> TEXT <marquee direction="right" scrollamount="3" width="10%">>>>></marquee>

Opposite Highlight

TEXT

<marquee behavior="alternate"><marquee width="150">TEXT</marquee></marquee>

Hiding Marquee

TEXT
TEXT

<marquee behavior="alternate" direction="up" scrollamount="2" scrolldelay="65" height="80" style="filter:wave(add=0,phase=1,freq=1,strength=15,color=#FFFFFF)"><center>TEXT<br>TEXT</center></marquee>

Wave Marquee

TEXT

🎨 Pick Background Color Marquee Color:

<marquee direction="left" style="background:#477dcf">TEXT</marquee>

Background Color Marquee

TEXT

🎨 Pick Border Color Marquee Color:

<marquee style="border:2px solid #477dcf">TEXT</marquee>

Border Color Marquee

Modern CSS Marquee

A modern, standards-compliant marquee effect using CSS animations:

TEXT TEXT TEXT TEXT TEXT

<style>
.css-marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  animation: css-marquee 8s linear infinite;
}
@keyframes css-marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

<div class="css-marquee">TEXT TEXT TEXT TEXT TEXT</div>

More Web Design Tips