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
CSS3 Radial Gradients
CSS3 radial gradients create smooth color transitions that emanate outward from a center point, forming circular or elliptical patterns. Unlike linear gradients that flow in straight lines, radial gradients spread from the center to the edges.
Syntax
selector {
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
}
Possible Values
| Parameter | Description |
|---|---|
shape |
circle or ellipse (default: ellipse) |
size |
closest-side, farthest-side, closest-corner, farthest-corner |
position |
center, top, bottom, left, right, or specific coordinates |
color-stop |
Color and optional position (percentage or length) |
Example: Basic Radial Gradient
The following example creates a simple radial gradient with three color stops −
<!DOCTYPE html>
<html>
<head>
<style>
.radial-gradient {
height: 200px;
width: 300px;
background: radial-gradient(red 5%, green 15%, pink 60%);
border-radius: 10px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="radial-gradient"></div>
</body>
</html>
A rectangular box with a radial gradient appears, starting with red at the center (5%), transitioning to green (15%), and ending with pink at the outer edges (60%).
Example: Circular Gradient with Custom Position
This example demonstrates a circular gradient positioned at the top-left corner −
<!DOCTYPE html>
<html>
<head>
<style>
.circular-gradient {
height: 200px;
width: 300px;
background: radial-gradient(circle at top left, #ff6b6b, #4ecdc4, #45b7d1);
border-radius: 10px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="circular-gradient"></div>
</body>
</html>
A rectangular box with a circular gradient emanating from the top-left corner, transitioning from coral red to teal to blue.
Conclusion
CSS3 radial gradients provide powerful tools for creating attractive background effects. You can control the shape, size, position, and color stops to achieve various visual designs for modern web interfaces.
Updated on: 2026-03-15T12:02:51+05:30
180 Views
Advertisements