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
Creating CSS3 Radial Gradients
CSS3 radial gradients create smooth color transitions radiating outward from a central point. The gradient forms circular or elliptical patterns, making them perfect for creating modern visual effects and backgrounds.
Syntax
selector {
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
}
Possible Values
| Parameter | Description |
|---|---|
shape |
circle or ellipse (default) |
size |
closest-side, closest-corner, farthest-side, farthest-corner |
position |
center (default), top, bottom, left, right, or percentage values |
color-stop |
Colors with optional position percentages |
Example: Basic Radial Gradient
The following example creates a simple radial gradient with three colors −
<!DOCTYPE html>
<html>
<head>
<style>
.radial-basic {
height: 200px;
width: 200px;
background: radial-gradient(
rgb(255, 0, 106),
rgb(2, 0, 128),
rgb(0, 255, 42)
);
border-radius: 10px;
}
</style>
</head>
<body>
<h3>Basic Radial Gradient</h3>
<div class="radial-basic"></div>
</body>
</html>
A square box displaying a radial gradient that transitions from bright pink at the center to dark blue in the middle, and finally to bright green at the edges.
Example: Circular Gradient with Positioning
This example demonstrates a circular gradient positioned at the top-left corner −
<!DOCTYPE html>
<html>
<head>
<style>
.radial-circle {
height: 200px;
width: 300px;
background: radial-gradient(
circle at top left,
#ff6b6b,
#4ecdc4,
#45b7d1
);
border-radius: 10px;
}
</style>
</head>
<body>
<h3>Positioned Circular Gradient</h3>
<div class="radial-circle"></div>
</body>
</html>
A rectangular box with a circular gradient starting from the top-left corner, transitioning from coral red to teal to blue, creating an asymmetrical radial effect.
Example: Gradient with Color Stops
You can control color positions using percentage values for precise gradient control −
<!DOCTYPE html>
<html>
<head>
<style>
.radial-stops {
height: 200px;
width: 200px;
background: radial-gradient(
circle,
#ffd700 0%,
#ff8c00 30%,
#ff4500 60%,
#8b0000 100%
);
border-radius: 50%;
}
</style>
</head>
<body>
<h3>Gradient with Color Stops</h3>
<div class="radial-stops"></div>
</body>
</html>
A circular element displaying a radial gradient resembling a sunset, with gold at the center transitioning through orange and red to dark red at the edges.
Conclusion
Radial gradients provide powerful styling options for creating eye-catching backgrounds and visual effects. By controlling shape, position, and color stops, you can create everything from subtle shadows to dramatic focal points in your designs.
Updated on: 2026-03-15T14:41:58+05:30
177 Views
Advertisements