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 Multi color Gradients
CSS3 multi-color gradients allow you to create smooth transitions between multiple colors in a single gradient. Unlike simple gradients that use only two colors, multi-color gradients can include three or more colors to create vibrant, complex color effects.
Syntax
selector {
background: linear-gradient(direction, color1, color2, color3, ...);
}
Example
The following example demonstrates a multi-color linear gradient with seven colors −
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
height: 100px;
width: 100%;
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
margin: 20px 0;
}
.container {
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h3>Rainbow Multi-Color Gradient</h3>
<div id="grad"></div>
</div>
</body>
</html>
A rectangular div displaying a smooth gradient transition from red through orange, yellow, green, blue, indigo, and violet, creating a rainbow effect across the width of the element.
Controlling Color Stops
You can control the position of each color using percentage values to create custom color distributions −
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
height: 80px;
margin: 10px 0;
border-radius: 8px;
}
.gradient1 {
background: linear-gradient(to right, #ff0000 0%, #ff8800 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%);
}
.gradient2 {
background: linear-gradient(45deg, #e74c3c 0%, #f39c12 30%, #f1c40f 60%, #2ecc71 100%);
}
</style>
</head>
<body>
<div class="gradient-box gradient1"></div>
<div class="gradient-box gradient2"></div>
</body>
</html>
Two gradient boxes appear: the first showing a horizontal rainbow transition with specific color stops, and the second showing a diagonal gradient with warm to cool color transitions at 45 degrees.
Conclusion
Multi-color gradients provide powerful design capabilities by allowing smooth transitions between multiple colors. You can control both the colors used and their positions to create custom gradient effects for backgrounds and design elements.
Updated on: 2026-03-15T12:03:21+05:30
258 Views
Advertisements