What is Radial Gradient in CSS Syntax & Examples
This Blog You Will Learn
ஃ What is the HTML radial gradient in CSS
ஃ Core Components Explained
ஃ Core Components Explained
ஃ Advantage
ஃ Real -world Use cases
ஃ Syntax
ஃ Key Points
ஃ Examples
ஃ Explain Program
ஃ Output
ஃ Real -world Use cases
ஃ Syntax
ஃ Key Points
ஃ Examples
ஃ Explain Program
ஃ Output
What is the HTML radial gradient in CSS
✅CSS technique use to create color transitions that spread outward from a central point
✅Not a HTML tag is a css background feature
✅Created using the radial-gradient() css function
✅Radial gradients applied HTML elements like <div>, <body> , <section> etc.
✅Works with background or background-image.
✅Colors move in circular or elliptical pattern from the center outward.
✅Default shape of radial gradient is ellipse.
✅Define a circular gradient using the circle keyword.
✅Two or more color can be used in single gradient.
✅Used for Modern Ul backgrounds ,buttons,highlight effects and web page sections.
✅Not a HTML tag is a css background feature
✅Created using the radial-gradient() css function
✅Radial gradients applied HTML elements like <div>, <body> , <section> etc.
✅Works with background or background-image.
✅Colors move in circular or elliptical pattern from the center outward.
✅Default shape of radial gradient is ellipse.
✅Define a circular gradient using the circle keyword.
✅Two or more color can be used in single gradient.
✅Used for Modern Ul backgrounds ,buttons,highlight effects and web page sections.
Core Components Explained
1) Shape
- circle → perfect circular gradient
- ellipse → oval gradient (default)
CSS
radial-gradient(circle, blue, red);
2) Size
- Controls gradient expands
- closest-side
- farthest-side
- closest-corner
- farthest-corner(default)
radial-gradient(circle closest-side, blue, red);
3) Position
- Defines where gradient starts
- center (default)
- top,bottom,left,right
- at x% y%
radial-gradient(circle at 30% 40%, yellow, red);
4) Color stops
- Specify colors their positions
radial-gradient(red 10%, yellow 50%, green 90%);
- First-color → center
- Last color → edge
Advantage
✔ Lightweight and responsive
✔ Improves page load speed
✔ No image downloads
✔ Scales perfectly on all screen size
✔ Improves page load speed
✔ No image downloads
✔ Scales perfectly on all screen size
Real -world Use cases
- Button with glow effect
- Cards and dashboards
- Game Ul and dashboards
- Loading animations
- Hero section background
Syntax
background-image:radial-gradient(color1,color2,color3);
- Radial Gradient in css creates a circular or elliptical transition of colors from the center outward
- first color appears at the center
- colors smoothly transition toward the edges
Key Points
- Used with background-image or background
- No image file needed
- Improves Ul design performance
What is Radial Gradient in CSS Syntax & Examples
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
height: 150px;
width: 200px;
background-image: radial-gradient(blue, orange, red);
}
</style>
</head>
<body>
<h2> Radial Gradient in CSS Syntax & Examples </h2>
<div id="grad"></div>
</body>
</html>
What is Radial Gradient in CSS Syntax & Examples
Explain Program
Step 1]
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2 ]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
CSS Styling
<head>
<style>
#grad {
height: 150px;
width: 200px;
background-image: radial-gradient(blue, orange, red);
}
</style>
</head>
- Starts Internal CSS
- # grad is Selects the element with id="grad"
- set height and width of box
- create a visible rectangular area for gradient
- Applies radient background color
- blue → color at center
- orange → Middle transition color
- red → outer edge color
- </style> and </head> → ends
Step 4]
Body Section
<body>
<h2> Radial Gradient in CSS Syntax & Examples </h2>
<div id="grad"></div>
</body>
- Contains visible content of the webpage
- Display a Heading on tha page
- Creates a <div> box
Step 5]
Closing tag
</body>
</html>
What is Radial Gradient in CSS Syntax & Examples
Output
