How to create a marquee effect using CSS ?

Last Updated : 29 Dec, 2023

In this article, we will be creating the marquee effect by using HTML and CSS. This effect can be created by using the <marquee> tag in HTML, but we will not use this tag as it is not widely used nowadays. We will create and design a marquee effect by using the CSS classes and styling properties. We will add some attractive animations, and colors to the marquee effect.

Preview

marqueerev

Approach

Create the basic structure of the web page using various elements like <div>, <h1>, <h3> elements.
For the <div> class “marquee-container”, we will be applying the marquee animation by specifying the properties and animations. We will create the shadow and rounded corners for the effect of the marquee.
We will also apply some attractive colors to make the effect beautiful. We will adjust the fonts, and spacing as per our need to make the effect more attractive.
Use keyframes for defining the transform property. Set the property animation for 10s linear infinite for smooth animation to the element having class “marquee-container”.

Example: In this example, we will create a marquee effect using HTML and CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Marquee Effect</title> 
    <style> 
        body { 
            font-family: 'Arial', sans-serif; 
            background: linear-gradient(to right, #feffae, #ffffff); 
            color: rgb(43, 70, 15); 
            margin: 0; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: center; 
            height: 100vh; 
            overflow: hidden; 
        } 
  
        h1 { 
            color: green; 
            margin-bottom: 10px; 
        } 
  
        h3 { 
            margin-bottom: 20px; 
            color: black; 
        } 
  
        .marquee-container { 
            display: flex; 
            overflow: hidden; 
            white-space: nowrap; 
            animation: marquee 10s linear infinite; 
            box-shadow: 0px 0px 10px rgba(36, 88, 21, 0.5); 
            border-radius: 10px; 
        } 
  
        .marquee-content { 
            font-size: 2em; 
            margin-right: 20px; 
            animation: textAnimation 5s linear infinite; 
        } 
  
        @keyframes marquee { 
            0% { 
                transform: translateX(100%); 
            } 
  
            100% { 
                transform: translateX(-100%); 
            } 
        } 
  
        @keyframes textAnimation { 
  
            0%, 
            100% { 
                transform: translateY(0); 
            } 
  
            50% { 
                transform: translateY(-10px); 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Marquee Effect using 
        HTML and CSS 
    </h3> 
    <div class="marquee-container"> 
        <div class="marquee-content"> 
            Welcome to GeeksforGeeks 
        </div> 
    </div> 
</body> 
  
</html>