CSS Gradients – Linear Gradients
CSS gradients allow you to make a background of two or more colors that smoothly transition from one to the other. They have been with us for quite a long time, and they have very good browser support. Most modern browsers understand them without prefixes, for IE9 and older there is a Gradient Filter, and for IE9 you can also use SVG.
Gradients can be used wherever images are used: in backgrounds, as list bullets and they can be set in content or border-image properties.
Linear-Gradient
Linear gradients are quite easy to use. For the most elementary gradient it is enough to set the start and end colors, such as:
background: linear-gradient(crimson, darkgreen);This will give the following effect:
Colors can be any number of two or more values. You can also control the direction of the gradient and the borders (stop points) of colors.
You can set the direction using degrees or keywords.
Degrees:
From 0 to 360, for example 270deg.
Keywords:
to top = 0deg;
to right = 90deg;
to bottom = 180deg – default value;
to left = 270deg.
Keywords can be combined with each other to get a diagonal gradient, for example to top left.
Below you can see how different directions work in stretching from crimson to darkgreen:
.top {background: linear-gradient(to top, crimson, darkgreen);}
.right {background: linear-gradient(to right, crimson, darkgreen);}
.bottom {background: linear-gradient(to bottom, crimson, darkgreen);}
.left {background: linear-gradient(to left, crimson, darkgreen);}
.top-left {background: linear-gradient(to top left, crimson, darkgreen);}
.top-right {background: linear-gradient(to top right, crimson, darkgreen);}
.bottom-left {background: linear-gradient(to bottom left, crimson, darkgreen);}
.bottom-right {background: linear-gradient(to bottom right, crimson, darkgreen);}
It should be remembered that to top right is not the same as 45deg. The gradient colors are located perpendicular to the gradient direction line. When to top right is used, the line goes from the lower left to the upper right corner, with 45deg it is strictly at this angle, regardless of the size of the shape.
The difference is clearly visible on the rectangular shapes as seen below:
.top-right {background: linear-gradient(to top right, crimson, darkgreen);}
.deg {background: linear-gradient(45deg, crimson, darkgreen);}
You can also set stop points for gradient colors; values are specified in units or percent and can be more than 100% and less than 0%.
Examples of setting values in %, em and values that go beyond the boundaries of an element are:
.percent {background: linear-gradient(to right, yellowgreen 15%, gold 25%);}
.ems {background: linear-gradient(to right, purple 2em, crimson 3em, orangered 7em, gold 12em);}
.negative {background: linear-gradient(to right, skyblue -50%, purple 150%);}
The closer the stop points of neighbouring colors are, the clearer the border between them will be. This way you can easily make striped backgrounds:
.two {background: linear-gradient(to right, crimson 50%, darkgreen 50%);}
.five{background: linear-gradient(to right, #63A69F 20%, #F2E1AC 20%, #F2E1AC 40%, #F2836B 40%, #F2836B 60%, #F2594B 60%, #F2594B 80%, #CD2C24 80%);}
In addition to the usual linear-gradient you can also make repeating-linear-gradient, a repeating gradient.
An example of an repeating-linear-gradient is as follows:
.grad-1 {background: repeating-linear-gradient(green, green .5em, transparent .5em, transparent 1em); background-color: yellowgreen;}
.grad-2 {background: repeating-linear-gradient(90deg, green, green .5em, transparent .5em, transparent 1em); background-color: yellowgreen;}Unfortunately, repeating gradients behave haphazardly and are suitable only for patterns that do not care about accuracy. If you need accuracy, use linear-gradient in combination with background-size and background-repeat.
Gradients have the same limitation as the box-shadow property, they cannot be given colors or direction separately. This leads to duplication of code and an acute need to use pre-processors in the case of complex gradients.
In combination with the basic capabilities of managing background images, gradients provide the broadest possibilities for creating backgrounds of varying degrees of complexity completely without the use of images. You can make complex and interesting patterns with gradients, but this is a completely different topic.
Don’t forget to check out our CSS Gradient Generator to help further with learning about gradients.
