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.
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 defininga linear gradient background to the body, transitioning from#428f73the top to#a6eebdthe bottom on the scroll. -
Style the HTML elements
h1,h3, andpelements 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 definingradial gradient, transitioning from#bac5d9(10%) to#78b6cc(50%) and then to#cdd9e7(100%) on scroll. -
Style the HTML elements
h1,h3, andpelements 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