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
Types of Gradients in CSS
CSS gradients create smooth transitions between two or more specified colors. They are essential for modern web design, allowing you to create beautiful color transitions without using images.
Syntax
/* Linear Gradient */ background: linear-gradient(direction, color1, color2, ...); /* Radial Gradient */ background: radial-gradient(shape size at position, color1, color2, ...);
Types of Gradients
CSS provides two main types of gradients −
- Linear Gradients − Transitions along a straight line (down/up/left/right/diagonally)
- Radial Gradients − Transitions radiating from a center point in a circular or elliptical pattern
Linear Gradient Example
The following example creates a linear gradient from top to bottom −
<!DOCTYPE html>
<html>
<head>
<style>
.linear-grad {
height: 100px;
width: 300px;
background: linear-gradient(to bottom, #ff6b6b, #4ecdc4, #45b7d1);
border: 1px solid #ccc;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="linear-grad"></div>
</body>
</html>
A rectangular box with a smooth color transition from red at the top, through teal in the middle, to blue at the bottom.
Radial Gradient Example
The following example creates a radial gradient radiating from the center −
<!DOCTYPE html>
<html>
<head>
<style>
.radial-grad {
height: 150px;
width: 300px;
background: radial-gradient(circle, #ff6b6b 20%, #4ecdc4 50%, #45b7d1 80%);
border: 1px solid #ccc;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="radial-grad"></div>
</body>
</html>
A rectangular box with a circular gradient starting with red at the center, transitioning to teal, and ending with blue at the edges.
Diagonal Linear Gradient
You can also create diagonal gradients by specifying angles or corner directions −
<!DOCTYPE html>
<html>
<head>
<style>
.diagonal-grad {
height: 100px;
width: 300px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border: 1px solid #ccc;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="diagonal-grad"></div>
</body>
</html>
A rectangular box with a diagonal gradient transitioning from red in the bottom-left corner to teal in the top-right corner at a 45-degree angle.
Conclusion
CSS gradients provide a powerful way to create smooth color transitions. Linear gradients work along straight lines, while radial gradients emanate from a central point, giving you flexible options for modern web design.
Updated on: 2026-03-15T12:03:47+05:30
307 Views
Advertisements