How to use Radial Gradient In CSS
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
, andp
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 >w3wiki</ 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:
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