CSS Effects
CSS Gradients
CSS Gradients are used to create smooth transitions between two or more colors without using images.
Gradients are commonly used for:
- Website backgrounds
- Buttons
- Cards
- Hero sections
- Modern UI designs
Because gradients are generated by CSS, they load faster than image-based backgrounds and scale perfectly on all screen sizes. The supporting concepts are explained in CSS Colors and Modern Colors.
CSS provides two main gradient types:
- Linear Gradient
- Radial Gradient
Syntax
Linear Gradient
Linear Gradient Syntax
css
selector {
background: linear-gradient(color1, color2);
}Linear Gradient Example
css
div {
background: linear-gradient(red, blue);
}Creates a gradient from red to blue.
Radial Gradient
Radial Gradient Syntax
css
selector {
background: radial-gradient(color1, color2);
}Radial Gradient Example
css
div {
background: radial-gradient(yellow, orange);
}Creates a circular gradient effect.
Attributes
| Function | Description | Example |
|---|---|---|
| linear-gradient() | Creates a linear color transition | linear-gradient(red, blue) |
| radial-gradient() | Creates a circular gradient | radial-gradient(yellow, orange) |
| repeating-linear-gradient() | Repeats a linear gradient | repeating-linear-gradient(red, blue 20px) |
| repeating-radial-gradient() | Repeats a radial gradient | repeating-radial-gradient(red, blue 20px) |
| color stops | Defines transition points | red 20%, blue 80% |
Example
CSS Gradients Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Gradients Example</title>
<style>
.linear-box {
width: 300px;
height: 150px;
background: linear-gradient(to right, #007acc, #00c6ff);
margin-bottom: 20px;
}
.radial-box {
width: 300px;
height: 150px;
background: radial-gradient(circle, yellow, orange);
}
</style>
</head>
<body>
<div class="linear-box"></div>
<div class="radial-box"></div>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| linear-gradient() | 26 | 12 | 16 | 7 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Gradients are commonly used as background images.
- Multiple colors can be added to a gradient.
- Gradients reduce the need for image files.
- Direction can be specified using
to right,to left,to top,to bottom, and angle values such as45deg.
Three-Color Gradient
Three-Color Gradient
css
background: linear-gradient(
red,
yellow,
blue
);Directional Gradient
Directional Gradient
css
background: linear-gradient(
to right,
purple,
pink
);Angle-Based Gradient
Angle-Based Gradient
css
background: linear-gradient(
45deg,
#007acc,
#00ffcc
);Radial Gradient
Radial Gradient
css
background: radial-gradient(
circle,
white,
blue
);Conclusion
CSS Gradients provide a powerful way to create modern, colorful, and visually appealing backgrounds without using images. By combining colors, directions, and gradient types, you can design professional interfaces that are lightweight, responsive, and easy to maintain.