How to change Background Gradient on Scroll ?

Last Updated : 09 Feb, 2024

Linear gradient provides the color transition along a straight line. A Radial gradient provides the color transition that radiates outward from a central point. Creating a gradient background color that changes on scroll using CSS involves combining CSS for gradients to handle the scrolling effect.

Table of Content

Using Linear Gradient
Using Radial Gradient

Using Linear Gradient

A linear gradient is a color transition that progresses along a straight line, allowing for smooth color changes from one point to another.

Approach

Firstly, create the basic structure of the web page using <h1>, <h3> and <p> elements in the HTML document file.
Set the height of the body to 200% of the viewport height, creating a scrollable area.
Set the background-image: linear-gradient(to top, #428f73 0%, #a6eebd 100%) for defining a linear gradient background to the body, transitioning from #428f73 the top to #a6eebd the bottom on the scroll.
Style the HTML elements h1, h3, and p elements with specific font sizes and colors.

Example: Illustration of linear background color on scroll using CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
      <title>Using linear gradient</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>linear background color on scroll</title> 
    <style> 
        body { 
            height: 200vh; 
            background-image:  
                linear-gradient(to top, #0b3525 0%, #fbfdfb 100%); 
        } 
  
        h1, 
        h3 { 
            text-align: center; 
            font-size: 30px; 
            color: rgb(18, 96, 18); 
        } 
  
        p { 
            font-size: 30px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>linear background color on scroll</h3> 
    <p> 
       Linear Data Structure: Data structure  
       in which data elements are arranged  
       sequentially or linearly, where each 
       element is attached to its previous 
       and next adjacent elements, is called  
       a linear data structure. 
       Array, Stack, Queue, Linked List, etc. 
       Static Data Structure: Static data  
       structure has a fixed memory size.  
       It is easier to access the elements  
       in a static data structure. Dynamic  
       Data Structure: In dynamic data structure, 
       the size is not fixed. It can be randomly  
       updated during the runtime which may be  
       considered efficient concerning the memory 
       (space) complexity of the code. Queue, Stack 
       etc.Non-Linear Data Structure: Data structures 
       where data elements are not placed sequentially 
       or linearly are called non-linear data structures. 
       In a non-linear data structure, we can’t traverse 
       all the elements in a single run only. 
    </p> 
</body> 
  
</html>

Output:

Output

Using Radial Gradient

A Radial gradient is a color transition that radiates outward from a central point, creating a circular pattern with different colors at varying distances from the center.

Approach:

Firstly, create the basic structure of the web page using <h1>, <h3> and <p> elements in the HTML document file.
Sets the height of the body to 150vh of the viewport height, creating a scrollable area.
Set the background-image: linear-gradient(to top, #428f73 0%, #a6eebd 100%) for defining radial gradient, transitioning from #bac5d9 (10%) to #78b6cc (50%) and then to #cdd9e7 (100%) on scroll.
Style the HTML elements h1, h3, and p elements with specific font sizes and colors.

Example: Illustration of radial background color on scroll using CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
      <title>Using radial gradient</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Radial background color on scroll</title> 
    <style> 
        body { 
            height: 150vh; 
            background:  
             radial-gradient(circle, #bec8dc 10%, #2380a1 50%, #f4f8fd 100%); 
        } 
  
        h1, 
        h3 { 
            text-align: center; 
            font-size: 30px; 
            color: rgb(18, 96, 18); 
        } 
  
        p { 
            font-size: 30px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Radial Background Color on Scroll</h3> 
    <p> 
       Linear Data Structure: Data structure  
       in which data elements are arranged  
       sequentially or linearly, where each 
       element is attached to its previous 
       and next adjacent elements, is called  
       a linear data structure. 
       Array, Stack, Queue, Linked List, etc. 
       Static Data Structure: Static data  
       structure has a fixed memory size.  
       It is easier to access the elements  
       in a static data structure. Dynamic  
       Data Structure: In dynamic data structure, 
       the size is not fixed. It can be randomly  
       updated during the runtime which may be  
       considered efficient concerning the memory 
       (space) complexity of the code. Queue, Stack 
       etc.Non-Linear Data Structure: Data structures 
       where data elements are not placed sequentially 
       or linearly are called non-linear data structures. 
       In a non-linear data structure, we can’t traverse 
       all the elements in a single run only. 
    </p> 
</body> 
  
</html>

Output:

Output

Suggest improvement

How to create linear gradient background using CSS ?

Share your thoughts in the comments

How to change Background Gradient on Scroll ?

Using Linear Gradient

Approach

HTML

Using Radial Gradient

Approach:

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?