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
Using the CSS3 Linear and Radial Gradients
CSS gradients display smooth transitions between two or more colors. Linear gradients create color transitions along a straight line, while radial gradients radiate outward from a central point in circular or elliptical patterns.
Syntax
/* Linear Gradient */ background-image: linear-gradient(direction, color1, color2, ...); /* Radial Gradient */ background-image: radial-gradient(shape size at position, color1, color2, ...);
Linear Gradients
Linear gradients are created using the background-image property with linear-gradient(). You can control the direction using angles or keywords like to right, to bottom.
Example: Linear Gradient with Angles
The following example demonstrates linear gradients using different angle directions −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.gradient-box {
height: 150px;
width: 200px;
display: inline-block;
margin: 10px;
border: 2px solid #333;
text-align: center;
line-height: 150px;
color: white;
font-weight: bold;
}
.linear-90 {
background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow);
}
.linear-minus90 {
background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow);
}
.linear-45 {
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
</style>
</head>
<body>
<h1>Linear Gradient Examples</h1>
<div class="gradient-box linear-90">90deg</div>
<div class="gradient-box linear-minus90">-90deg</div>
<div class="gradient-box linear-45">45deg</div>
</body>
</html>
Three rectangular boxes with different linear gradients appear: first with horizontal gradient (90deg), second with opposite horizontal gradient (-90deg), and third with diagonal gradient (45deg).
Example: Linear Gradient Over Background Image
You can combine gradients with background images to create overlay effects −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.hero-section {
height: 400px;
background-image:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 100, 200, 0.3)),
url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4N0NFRUIiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OEZCOTgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.hero-content h1 {
font-size: 3rem;
margin: 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
.hero-content p {
font-size: 1.2rem;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="hero-section">
<div class="hero-content">
<h1>Welcome</h1>
<p>Gradient overlay on background image</p>
</div>
</div>
</body>
</html>
A hero section with a gradient overlay on top of a background image, displaying centered white text with shadow effects.
Radial Gradients
Radial gradients create circular or elliptical color transitions radiating from a center point. You can specify the shape, size, and position of the gradient.
Example: Ellipse and Circle Radial Gradients
The following example shows radial gradients with different shapes −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.radial-box {
height: 200px;
width: 250px;
display: inline-block;
margin: 15px;
border: 2px solid #333;
}
.ellipse-gradient {
background-image: radial-gradient(ellipse, #ffeb3b, #ff5722, #2196f3);
}
.circle-gradient {
background-image: radial-gradient(circle, cyan, orange, green);
}
.positioned-gradient {
background-image: radial-gradient(40% 50px at center, #4caf50, #00bcd4, #800020);
}
</style>
</head>
<body>
<h1>Radial Gradient Examples</h1>
<div class="radial-box ellipse-gradient"></div>
<div class="radial-box circle-gradient"></div>
<div class="radial-box positioned-gradient"></div>
<p><strong>Left:</strong> Ellipse shape | <strong>Center:</strong> Circle shape | <strong>Right:</strong> Custom size</p>
</body>
</html>
Three rectangular boxes displaying different radial gradients: an elliptical gradient with yellow-red-blue colors, a circular gradient with cyan-orange-green colors, and a custom-sized gradient with green-cyan-maroon colors.
Gradient Properties
| Property | Linear Gradient | Radial Gradient |
|---|---|---|
| Direction | Angle (45deg) or keywords (to right) | Shape and position (circle at top) |
| Colors | Multiple colors with optional stop positions | Multiple colors radiating from center |
| Repeating | repeating-linear-gradient() | repeating-radial-gradient() |
Conclusion
CSS gradients provide powerful ways to create smooth color transitions. Linear gradients work well for backgrounds and overlays, while radial gradients are perfect for creating spotlight effects and circular designs. Both can be combined with images and positioned precisely for creative layouts.
187 Views
