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
Setting the Location Color Stops using CSS
CSS linear gradients allow you to create smooth color transitions between multiple colors. The linear-gradient() function lets you control the exact position where each color starts and stops using color stops.
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Color stops can be specified with percentages (0% to 100%) or absolute lengths (px, em, rem) to control where each color begins and ends in the gradient.
Example 1: Evenly Spaced Color Stops
When no percentages are specified, colors are distributed evenly across the gradient −
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-box {
height: 100px;
width: 300px;
background-image: linear-gradient(
rgb(61, 255, 2),
rgb(0, 174, 255),
rgb(255, 29, 29)
);
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h3>Evenly Spaced Color Stops</h3>
<div class="gradient-box"></div>
</body>
</html>
A rectangular box with a smooth gradient transitioning from bright green at the top to blue in the middle to red at the bottom.
Example 2: Custom Positioned Color Stops
You can specify exact positions for each color using percentages to create uneven color distributions −
<!DOCTYPE html>
<html>
<head>
<style>
.custom-gradient {
height: 100px;
width: 300px;
background-image: linear-gradient(
rgb(61, 255, 2) 20%,
rgb(0, 174, 255) 40%,
rgb(255, 29, 29) 80%
);
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h3>Custom Positioned Color Stops</h3>
<div class="custom-gradient"></div>
</body>
</html>
A rectangular box with green occupying the first 20%, blue from 20% to 40%, and red from 40% to 80%, with the remaining space filled by the final red color.
Example 3: Angled Gradients with Color Stops
Combine angles with precise color stop positions for directional gradients −
<!DOCTYPE html>
<html>
<head>
<style>
.angled-gradient {
height: 120px;
width: 300px;
background-image: linear-gradient(
45deg,
#ff6b6b 0%,
#4ecdc4 50%,
#45b7d1 100%
);
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h3>45-Degree Gradient with Precise Stops</h3>
<div class="angled-gradient">Diagonal Gradient</div>
</body>
</html>
A rectangular box with a diagonal gradient (45 degrees) starting with coral red, transitioning to teal at the center, and ending with blue. White text "Diagonal Gradient" is centered in the box.
Example 4: Hard Color Stops for Striped Effect
Place multiple color stops at the same position to create sharp transitions without blending −
<!DOCTYPE html>
<html>
<head>
<style>
.striped-gradient {
height: 100px;
width: 300px;
background-image: linear-gradient(
90deg,
#ff0000 0%,
#ff0000 33.33%,
#ffffff 33.33%,
#ffffff 66.66%,
#0000ff 66.66%,
#0000ff 100%
);
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h3>Hard Color Stops - Flag Effect</h3>
<div class="striped-gradient"></div>
</body>
</html>
A rectangular box displaying three distinct vertical stripes: red (first third), white (middle third), and blue (final third) with sharp transitions between colors.
Conclusion
Color stops in CSS linear gradients provide precise control over color transitions. Use percentages or lengths to position colors exactly where needed, creating effects from smooth blends to sharp stripes.
292 Views
