CSS Gradients: A Syntax Crash Course

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:

[code language="css"]
.example {
background: linear-gradient(
[direction], [first-color], [second-color], [more-colors ...]
);
}
[/code]

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:

[code language="css"]
.example {
background: linear-gradient(to right, hotpink, lightpink);
}
[/code]

See the Pen Left to Right Linear Gradient by SitePoint (@SitePoint) on CodePen.

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:

[code language="css"]
.example {
background: -prefix-linear-gradient(left, red, blue);
}
[/code]

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.

[code language="css"]
.example {
background: linear-gradient(60deg, red, blue);
}
[/code]

Considering a line from bottom to top to be at zero degrees, the angle increases if the line moves in a clockwise direction. For instance:

[code language="css"]
.example {
background: linear-gradient(0deg, red, blue);
}
[/code]

This will create a gradient with red at the bottom and blue at the top. While the following will create a horizontal gradient with red on the left side and blue on the right:

[code language="css"]
.example {
background: linear-gradient(90deg, red, blue);
}
[/code]

See the Pen Linear Gradients with Different Angles by SitePoint (@SitePoint) on CodePen.

Specifying Color Stops in Linear Gradients

If you want to change the colors non-uniformly you can specify color stops yourself. Position of color stops can be specified as a percentage value or an absolute length. You don’t need to specify the stop position for first and last color. A given color is at its full strength on the position that you specified. Here, is an example:

[code language="css"]
.example {
background: linear-gradient(
to bottom, yellow, red 70%, black
);
}
[/code]

If there are no stops specified, the colors will be spaced evenly.

See the Pen Linear Gradient with Color Stops by SitePoint (@SitePoint) on CodePen.

Radial Gradients

Radial gradients are less common and more complex. This is the syntax for radial gradients:

Continue reading %CSS Gradients: A Syntax Crash Course%

by Baljeet Rathi via SitePoint