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
How to add gradients to your project using CSS?
CSS gradients are smooth transitions between two or more colors that add visual depth and interest to your web designs. They can create backgrounds, textures, and enhance the overall appearance of elements without requiring images.
Syntax
/* Linear Gradient */ background: linear-gradient(direction, color1, color2, ...); /* Radial Gradient */ background: radial-gradient(shape size at position, color1, color2, ...);
Method 1: Using Linear Gradient
Linear gradients create smooth color transitions in a straight line. You can control the direction and specify multiple color stops to achieve various effects.
Example: Basic Linear Gradient
The following example creates a horizontal gradient from red to yellow
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
background: linear-gradient(to right, #ff0000, #ffff00);
width: 300px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
margin: 20px;
}
</style>
</head>
<body>
<div class="gradient-box">
Linear Gradient
</div>
</body>
</html>
A rectangular box with a horizontal gradient from red on the left to yellow on the right, with centered white text "Linear Gradient" appears on the page.
Example: Diagonal Linear Gradient
This example creates a diagonal gradient with multiple colors
<!DOCTYPE html>
<html>
<head>
<style>
.diagonal-gradient {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
width: 300px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 20px;
}
</style>
</head>
<body>
<div class="diagonal-gradient">
Diagonal Gradient
</div>
</body>
</html>
A rectangular box with a diagonal gradient (45-degree angle) transitioning through coral, teal, and blue colors, with centered bold white text "Diagonal Gradient".
Method 2: Using Radial Gradient
Radial gradients create circular or elliptical color transitions radiating from a center point. They are perfect for creating spotlight effects or circular patterns.
Example: Circular Radial Gradient
The following example creates a circular gradient from the center
<!DOCTYPE html>
<html>
<head>
<style>
.radial-gradient {
background: radial-gradient(circle, #ff0000, #ffff00);
width: 250px;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 20px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="radial-gradient">
Radial Gradient
</div>
</body>
</html>
A circular element with a radial gradient starting from red in the center and transitioning to yellow at the edges, with centered bold white text "Radial Gradient".
Example: Elliptical Radial Gradient
This example creates an elliptical gradient with custom positioning
<!DOCTYPE html>
<html>
<head>
<style>
.elliptical-gradient {
background: radial-gradient(ellipse at top left, #667eea, #764ba2);
width: 300px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin: 20px;
}
</style>
</head>
<body>
<div class="elliptical-gradient">
Elliptical Gradient
</div>
</body>
</html>
A rectangular box with an elliptical radial gradient positioned at the top-left corner, transitioning from light purple to dark purple, with centered bold white text "Elliptical Gradient".
Conclusion
CSS gradients offer powerful ways to enhance your designs without images. Linear gradients work well for backgrounds and buttons, while radial gradients are perfect for creating focal points and circular effects. Experiment with different directions, colors, and shapes to achieve unique visual results.
468 Views
