CSS Gradients
CSS gradients make it possible to smoothly transition between two or more selected colors.
CSS describes three kinds of gradients:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
- Conic Gradients (rotated around a center point)
CSS Linear Gradients
To create a smooth transition of colors, you must select at least two different colors. Think of these colors as dots on a line, and the computer will seamlessly merge them. You can also decide where this color change should start and the direction it should follow..
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Direction - Top to Bottom (this is the usual way)
In this instance, we see a gradual change in color from red to yellow, beginning at the upper part.
top to bottom (default)
Direction - Left to Right
Here's an example that displays a color gradient. The gradient begins on the left side and goes from red to yellow.
left to right
Direction - Diagonal
To make a diagonal gradient, you need to specify where it should begin both horizontally and vertically on the webpage.
In this example, there's a color blend starting at the top left and going diagonally to the bottom right. It starts with red and smoothly turns into yellow.
top left to bottom right
Using Angles
If you want to control the appearance of a gradient, you can choose an angle instead of the typical directions like up, down, left, or right. When you set the angle to 0 degrees, it means the gradient goes from the top of the element to the bottom. If you set it to 90 degrees, it means the gradient goes from the left side to the right side. And if you select 180 degrees, it means the gradient goes from the bottom of the element to the top.
Syntax
background-image: linear-gradient(angle, color-stop1, color-stop2);
The next example demonstrates the usage of angles in linear gradients:
180deg
Using Transparency
CSS gradients can create a fading effect by allowing you to use transparent colors.
To make an object transparent, we use the rgba() function to select its colors. Inside the rgba() function, the last number can range from 0 to 1. This number indicates the level of transparency in the color: 0 means it's entirely transparent, and 1 means it's entirely opaque (no transparency at all).
In this illustration, we use a linear gradient that begins on the left side. Initially, it's invisible, and then it slowly turns into a bright red shade.
Repeating a linear-gradient
The repeating-linear-gradient() function is used to create a repeating pattern using linear gradients.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This gradient begins with a red color at the top and changes to yellow at the bottom.</p>
<div id="grad1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<p>This gradient begins as red on the left side and changes to yellow on the right side.</p>
<div id="grad1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Diagonal</h1>
<p>This gradient begins with red in the upper-left corner and changes to yellow in the bottom-right corner.</p>
<div id="grad1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradients - Using Different Angles</h1>
<div id="grad1" style="text-align:center;">0deg</div>
<br>
<div id="grad2" style="text-align:center;">90deg</div>
<br>
<div id="grad3" style="text-align:center;">180deg</div>
<br>
<div id="grad4" style="text-align:center;">-90deg</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow, green);
}
#grad2 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}
#grad3 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>
<h1>Linear Gradients - Multiple Color Stops</h1>
<p>
<strong>Note:</strong> Color stops are spaced evenly when no percents are specified.
</p>
<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>
<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>
<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 55px;
background-color: red;
/* For browsers that do not support gradients */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold"> Rainbow Background </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
</style>
</head>
<body>
<h1>Linear Gradient - Transparency</h1>
<p>To make something transparent, we utilize the rgba() function to specify the color points. The final value in the rgba() function ranges from 0 to 1 and determines how transparent the color is: 0 means completely transparent, and 1 means fully colored (no transparency).</p>
<div id="grad1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#grad2 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: repeating-linear-gradient(45deg, red, yellow 7%, green 10%);
}
#grad3 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: repeating-linear-gradient(190deg, red, yellow 7%, green 10%);
}
#grad4 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: repeating-linear-gradient(90deg, red, yellow 7%, green 10%);
}
#grad5 {
height: 200px;
background-color: red;
/* For browsers that do not support gradients */
background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>
<h1>Repeating Linear Gradient</h1>
<div id="grad1"></div>
<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>
<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>
<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>
<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL