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
How to create linear gradient background using CSS?
Linear gradient background in CSS is a design technique used to create a smooth transition between two or more colors in a single element. It is defined using the CSS background-image property and the linear-gradient() function.
Syntax
selector {
background: linear-gradient(direction, color1, color2, ...);
}
Linear Gradient Properties in CSS
| Property | Description |
|---|---|
direction |
Specifies the direction of the gradient (to top, to right, 45deg, etc.) |
color-stops |
Colors used in the gradient and their position |
repeating-linear-gradient |
Creates a repeating gradient pattern |
background-size |
Specifies the size of the gradient background |
background-position |
Specifies the position of the gradient background |
Example 1: Horizontal Gradient
The following example creates a gradient from red to yellow, flowing from left to right
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: linear-gradient(to right, #ff0000, #ffff00);
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 1px 1px 2px black;
}
</style>
</head>
<body>
<div>
<h2>Horizontal Linear Gradient</h2>
<p>This gradient flows from red to yellow, left to right.</p>
</div>
</body>
</html>
A full-page gradient background that transitions smoothly from red on the left to yellow on the right, with centered white text.
Example 2: Vertical Gradient
This example creates a vertical gradient from top to bottom
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 300px;
width: 400px;
background: linear-gradient(to bottom, #ff0000, #ffff00);
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 1px 1px 2px black;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<div>
<h2>Vertical Linear Gradient</h2>
<p>This gradient flows from top to bottom.</p>
</div>
</div>
</body>
</html>
A rectangular box with rounded corners displaying a gradient that transitions from red at the top to yellow at the bottom, with centered white text.
Example 3: Diagonal Gradient
This example creates a diagonal gradient using angle values
<!DOCTYPE html>
<html>
<head>
<style>
.header {
height: 150px;
background: linear-gradient(45deg, #ff0000, #ffff00, #00ff00);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 2px 2px 4px black;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="header">
<h2>Diagonal Gradient at 45 Degrees</h2>
</div>
<p style="text-align: center; margin-top: 20px;">The gradient flows diagonally from red to yellow to green.</p>
</body>
</html>
A header section with a diagonal gradient flowing at a 45-degree angle from red through yellow to green, with centered white text.
Example 4: Multiple Color Stops
This example demonstrates a gradient with multiple colors and specific positions
<!DOCTYPE html>
<html>
<head>
<style>
.rainbow-box {
height: 200px;
width: 100%;
background: linear-gradient(
to right,
#ff0000 0%,
#ff7700 16.66%,
#ffff00 33.33%,
#00ff00 50%,
#0077ff 66.66%,
#4400ff 83.33%,
#7700ff 100%
);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
text-shadow: 2px 2px 4px black;
}
</style>
</head>
<body>
<div class="rainbow-box">
<h2>Rainbow Gradient with Color Stops</h2>
</div>
</body>
</html>
A rainbow-colored gradient bar that transitions through red, orange, yellow, green, blue, indigo, and violet with smooth color transitions.
Conclusion
CSS linear gradients provide a powerful way to create smooth color transitions without images. You can control direction using keywords like to right or angles like 45deg, and specify multiple color stops for complex effects.
Updated on: 2026-03-15T16:26:21+05:30
1K+ Views
Advertisements