Extract from SitePoint article “CSS Gradients: A Syntax Crash Course” by Baljeet Rathi
Published July 9, 2015
In the past most websites used images heavily to create a fancy UI. Thanks to various CSS properties this trend has changed. This tutorial will help you to learn about CSS gradients.You can use gradients to replace images in various UI elements as well as in backgrounds. With a little practice you can create complex patterns without using a single image.
CSS gradients, which have excellent browser support, allow you to create smooth visual transitions between two or more specified colors. Gradients give you control over a lot of settings like the size of the gradient, its angle, position of color stops, etc.
In this post, I’ll cover linear, radial, as well as the newer repeating gradients.
Linear Gradients
Linear gradients are the most commonly used gradients. The looks like this, with the bracketed values representing the types of values:
.example {
background: linear-gradient(
[direction], [first-color], [second-color], [more-colors ...]
);
}
If you don’t specify a direction, the gradient will start at the top with full strength of the first color then smoothly transition to the last color as it reaches the bottom.
For more control, you can specify the direction of gradient. You can do it either by using simple terms like to left, to bottom right, or you can specify angles. Here is the code snippet to create a background that goes from left to right:
.example {
background: linear-gradient(to right, hotpink, lightpink);
}
Older browsers support a slightly different syntax and require browser specific prefixes. In older browsers, instead of specifying the end point you specify a start point. CSS3 gradient code for older browsers looks like this:
.example {
background: -prefix-linear-gradient(left, red, blue);
}
Specifying Angles for Linear Gradients
If you need to create a gradient at a specific angle, you can specify one directly. The code below creates a gradient at an angle of 60 degrees.