Create a Reverse Scrolling Effect using HTML and CSS Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report Creating an attractive UI with a reverse scroll effect can be an engaging design. The Reverse Scrolling effect facilitates a unique and visually interactive experience for users, which breaks the conventional top-down scrolling system to which the user is accustomed. In this article, we'll create a basic reverse-scrolling effect on the webpage with the help of HTML & CSS only. The following approach will be implemented to design the basic structure for the Reverse scroll. ApproachCreate a div with a container for content classes that will hold the content for reverse scroll.Define the styles for container, and content in order to create the reverse-scroll effect. Set the overflow property to hidden, in order to hide the content outside the container.Define the linear keyframe animation named reverseScroll with a duration of 20 seconds in an infinite loop.To animate the reverse scrolling, define the vertical translation to animate the content. Here, the content will have no vertical translation at '0%', & then the content will translated vertically by '-100%', in order to make the reverse-scroll effect at '100%'. Example: This example illustrates the basic implementation of creating the Reverse scroll Effect using HTML & CSS. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Reverse Scroll</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="content"> <h1> Welcome to GeeksforGeeks </h1> <p> GeeksforGeeks is a E-Learning Platform. </p> </div> </div> </body> </html> CSS body { margin: 0; padding: 0; background-color: #008000; overflow: hidden; font-family: Arial, sans-serif; } .container { width: 100vw; height: 100vh; background-size: cover; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .content { background-color: #C0C0C0; border-radius: 10px; padding: 20px; text-align: center; animation: reverseScroll 10s linear infinite; } @keyframes reverseScroll { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } } Output: Comment More infoAdvertise with us Next Article Create a Reverse Scrolling Effect using HTML and CSS V vikas2gqb5 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to create a Spotlight Effect using HTML and CSS ? In this article, we are going to create a spotlight effect over the image when we hover over it. This is mainly based on HTML, CSS and JavaScript. The below steps have to be followed to create this effect.HTML Section: In this section, we will create a container elements for the background image and 4 min read How to create reflection effect using HTML and CSS ? The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it is highly recommended not to use it any professional project. You can use it in your personal projects and maybe your portfolio to show your creativity. In this effect, we t 3 min read How to create a smooth scrolling effect using CSS ? Smooth scrolling is employed on web pages to enhance the user experience by providing a visually appealing and seamless transition between different sections of the page. It improves readability and enhances navigation. Using the CSS property scroll-behaviour we can achieve the smooth scrolling effe 2 min read How to Create a Sliding Background Effect Using CSS ? A sliding background effect in CSS creates a smooth, continuous movement of a webpage’s background image, typically in a horizontal or vertical direction. It gives a dynamic, animated feel by using properties like background-position and animation, enhancing visual engagement without additional Java 2 min read How to create a marquee effect using CSS ? 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 properti 2 min read How to create a bounce in and out on scroll effect using CSS ? Creating a bounce in and out on the scroll effect can add an exciting and engaging touch to your web design. This effect creates a bouncing animation when the user scrolls down the page, and then bounces back when the user scrolls up. In this article, we will discuss the syntax and approaches to cre 3 min read How to create Image Folding Effect using HTML and CSS? In this article, we are going to create an image folding effect below the main image. This is a simple project, we can achieve our target only by using HTML and CSS. Approach: Create the main div in which we are creating 4 list tags.Use of nth-child() selector property to give different styles to di 2 min read Create Scanning Animation Loader using HTML & CSS In this article, we will learn how to create a Scanning Animation. This can be used to add interactivity to the loader page. This is approached by simple HTML & CSS. Glimpse of the Project: Approach: We will first create an HTML file in which we are going to add a div for adding a span in it.We 2 min read How to Create a Smooth Scrolling Effect with CSS? To create a smooth scrolling effect with CSS, use the scroll-behavior: smooth property. This enables smooth transitions between sections of a webpage, offering a more seamless and polished experience for users.Instead of jumping from one section to another, smooth scrolling ensures gentle transition 6 min read How to create followspot effect using HTML CSS and jQuery ? The follow-spot effect (spotlight effect) is an effect that can be easily implemented using jQuery. The effect is quite popular for the opening or front banner design for any website. Approach: The approach is to use circle CSS on the mouse movement effect using the mousemove() function provided by 2 min read Like