22 Apr CSS Gradients
Gradients are smooth transitions between two or more colors. Instead of a solid, single-color background, gradients blend colors together in a continuous way, creating depth, dimension, and visual interest.
In web design (especially CSS), gradients are commonly used for backgrounds, buttons, overlays, and artistic effects. Use the background-image property to set the gradient functions.
Types of Gradients
- Linear Gradient: Colors transition along a straight line (up, down, left, right, or diagonal). Example: linear-gradient(to right, red, blue) → red fades into blue horizontally.
- Radial Gradient: Colors spread outward from a central point, forming circles or ellipses. Example: radial-gradient(circle, yellow, green) → yellow in the center, green at the edges.
Let us understand them one by one:
CSS Linear Gradient
The linear gradient shows a smooth transition between colors along a straight line. The direction can go top → bottom, left → right, or diagonally. For linear gradient, the linear-gradient() method is used.
Transition style: Straight line (up, down, left, right, diagonal)
Example 1: Set the direction of the linear gradient
Let us see an example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
}
#gradient1 {
background-image: linear-gradient(to bottom, red, yellow);
}
#gradient2 {
background-image: linear-gradient(to top, red, yellow);
}
#gradient3 {
background-image: linear-gradient(to right, red, yellow);
}
#gradient4 {
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient</h1>
<h2>Top to Bottom (Default)</h2>
<div id="gradient1">A linear gradient oriented top-to-bottom, starting with red and transitioning seamlessly into yellow.</div><br>
<h2>Bottom to Top</h2>
<div id="gradient2">A bottom‑to‑top linear gradient, beginning with red at the base and transitioning upward into yellow.</div><br>
<h2>Left to Right</h2>
<div id="gradient3">This example demonstrates a left‑to‑right linear gradient, beginning with red on the left and transitioning into yellow on the right.</div><br>
<h2>Diagonal</h2>
<div id="gradient4">This example illustrates a linear gradient oriented from the top‑left corner to the bottom‑right, starting with red and transitioning smoothly into yellow.</div><br>
</body>
</html>
Output
Example 2: Set the angle of the linear gradient
Instead of directions, like top, bottom, left, right, we can also set angles using the angle parameter. Here,
- 0deg = to top
- 90deg = to right
- 180deg = to bottom
- 270deg = to left
Let us see an example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
}
#gradient1 {
background-image: linear-gradient(180deg, red, yellow);
}
#gradient2 {
background-image: linear-gradient(0deg, red, yellow);
}
#gradient3 {
background-image: linear-gradient(90deg, red, yellow);
}
#gradient4 {
background-image: linear-gradient(270deg, red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient with angles</h1>
<h2>to bottom</h2>
<div id="gradient1"></div><br>
<h2>to top</h2>
<div id="gradient2"></div><br>
<h2>to right</h2>
<div id="gradient3"></div><br>
<h2>to left</h2>
<div id="gradient4"></div><br>
</body>
</html>
Output
CSS Radial Gradient
In radial gradient, the colors radiate outward from a central point. The shape is usually circular or elliptical. For linear gradient, the radial-gradient() method is used.
Transition style: Outward from center (circle/ellipse)
In CSS, a radial gradient creates a smooth transition of colors radiating outward from a central point, forming either a circle or ellipse. It’s defined using the radial-gradient() function, where you specify the shape, position, and color stops.
Here is the syntax:
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
Here:
- shape → circle or ellipse (default is ellipse).
- size → keywords like closest-side, farthest-side, closest-corner, farthest-corner.
- position → defines the gradient’s center (e.g., at center, at top left, or at 30% 40%).
- color stops → at least two colors, optionally with percentages.
Here are the default values:
- shape is ellipse,
- size is farthest-corner, and
- position is center
Example 1: Set the radial gradient
Let us see an example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 250px;
}
#gradient1 {
background-image: radial-gradient(red, yellow, green);
}
#gradient2 {
background-image: radial-gradient(red 25%, yellow 5%, green 50%);
}
#gradient3 {
background-image: radial-gradient(circle, red, yellow, green);
: ;
}
</style>
</head>
<body>
<h1>Radial Gradient</h1>
<h2>Radial gradient with evenly spaced color stops</h2>
<div id="gradient1"></div><br>
<h2>Radial gradient with differently spaced color stops</h2>
<div id="gradient2"></div><br>
<h2>Circle shape of the gradient</h2>
<p>The default shape is ellipse:</p>
<div id="gradient3"></div><br>
</body>
</html>
Output
Example 2: Set the radial gradient with the size
Let us see an example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 250px;
}
#gradient1 {
background-image: radial-gradient(closest-side at 50% 70%, red, yellow, blue);
}
#gradient2 {
background-image: radial-gradient(farthest-side at 50% 70%, red, yellow, blue);
}
#gradient3 {
background-image: radial-gradient(closest-corner at 50% 70%, red, yellow, blue);
}
#gradient4 {
background-image: radial-gradient(farthest-corner at 50% 70%, red, yellow, blue);
}
</style>
</head>
<body>
<h1>Radial Gradient with size</h1>
<p>The size parameter is for the size of the gradient's ending shape.<p>
<h2>Radial gradient with closest-side</h2>
<div id="gradient1"></div><br>
<h2>Radial gradient with farthest-side</h2>
<div id="gradient2"></div><br>
<h2>Radial gradient with closest-corner</h2>
<div id="gradient3"></div><br>
<h2>Radial gradient with farthest-corner</h2>
<div id="gradient4"></div><br>
</body>
</html>
Output
If you liked the tutorial, spread the word and share the link and our website, Studyopedia, with others.
Read More:
No Comments