Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Usage of radial-gradient() CSS function
The CSS radial-gradient() function creates a smooth transition between colors radiating from a center point. Unlike linear gradients that flow in a straight line, radial gradients expand outward in a circular or elliptical pattern.
Syntax
background: radial-gradient([shape] [size] [at position], color-stop1, color-stop2, ...);
Possible Values
| Parameter | Description |
|---|---|
shape |
Optional. circle or ellipse (default) |
size |
Optional. closest-side, farthest-side, closest-corner, farthest-corner
|
position |
Optional. Center position like center, top left, or 50% 30%
|
color-stop |
Two or more colors with optional stop positions |
Example: Basic Radial Gradient
The following example creates a radial gradient background with three colors −
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
height: 200px;
width: 300px;
background: radial-gradient(green, orange, maroon);
border-radius: 10px;
}
</style>
</head>
<body>
<p>Setting background as radial gradient.</p>
<div id="demo"></div>
</body>
</html>
A rectangular div with rounded corners displaying a radial gradient that starts with green at the center, transitions to orange in the middle, and ends with maroon at the edges.
Example: Custom Position and Shape
This example demonstrates a circular gradient positioned at the top-left corner −
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
height: 200px;
width: 300px;
background: radial-gradient(circle at top left, #ff6b6b, #4ecdc4, #45b7d1);
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="gradient-box"></div>
</body>
</html>
A rectangular div with a circular radial gradient starting from the top-left corner, transitioning from coral red to turquoise to blue, creating a spotlight effect.
Conclusion
The radial-gradient() function provides powerful control over circular and elliptical color transitions. By adjusting shape, size, position, and color stops, you can create various visual effects from subtle backgrounds to dramatic spotlight effects.
Updated on: 2026-03-15T13:19:39+05:30
124 Views
Advertisements