How to use Linear Gradient In CSS
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
, andp
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 >w3wiki</ 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:
How to change Background Gradient on Scroll ?
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