Linear gradients are identified by using the linear-gradient()
function within the background
or background-image
property. It must include (at least) two color values.
Before any gradient backgrounds are identified, it's good to put in a default background
property with a solid color. The solid color is to be used as a fallback should a browser not support gradient backgrounds.
Varying the gradient angle
By default, the gradient goes from the top of the block to the bottom. It is equivalent to writing this:
div {
background-image: linear-gradient(to bottom, rgb(100, 100, 100), rgb(200, 200, 200));
}
You can use the keywords to top
, to bottom
, to left
, to right
, to top left
, to top right
, to bottom left
and to bottom right
to change the angle or direction of the gradient
Another way to set gradient angles is through a degree value.
div {
background-image: linear-gradient(0deg, rgb(100, 100, 100), rgb(200, 200, 200));
}
-
0deg
is equivalent toto top
-
90deg
is equivalent toto right
-
180deg
is equivalent toto bottom
-
270deg
is equivalent toto left
-
360deg
brings you back toto top
again.
Colour stops
A color stop is a position along the gradient that has a specific color. You can specify as many colors as you like along gradient, and the browser will calculate all the colors between those stops.
This
div {
background-image: linear-gradient(to bottom right, rgb(255, 0, 0), rgb(150, 0, 0))
}
is equivalent to:
div {
background-image: linear-gradient(to bottom right, rgb(255, 0, 0) 0%, rgb(150, 0, 0) 100%)
}
So here we have one color stop at 0
, and one at 100%
of the way across the block the element is applied to. But there is no point writing these, as this is the default. Instead, it is a lot more useful to add color stops in between the start and end. For example:
div {
background-image: linear-gradient(to bottom right, rgb(255, 0, 0),
rgb(100, 0, 0) 50%,
rgb(50, 0, 0) 75%,
rgb(150, 0, 0));
}
Here we are starting with a really light red, then going to a darker red at 50%, an even darker one at 75%, and then a slightly lighter one at 100%.
Instead of percentages, you can use fixed values of length like px. However, for liquid layouts, percentages are recommended because the conditions in the code remain true despite any change in width or height.
Transparency gradients
You can vary the alpha channel value of the color along the gradient. For example:
div {
background-image: linear-gradient(to right,
rgba(100, 100, 100, 1),
rgba(100, 100, 100, 0.5))
}
Repeating linear gradients
Instead of linear-gradient
, you can use repeating-linear-gradient
. This takes the color stop values and repeats them endlessly. It doesn't make much sense to do this with percentage values, but with fixed units, it can create some cool effects.
Here we are starting at a bright full red, moving to a darker red after 20px
, then moving back to the full red at 40px
. Because it is a repeating gradient, it keeps repeating this pattern until the end of the block.
Browser support and old syntax
For compatibility with older browser versions and WebKit versions, you should consider including vendor prefixes versions of the property, all including the older syntax. This is basically the same, except:
The direction keywords are the opposite way round and don't include the word
to
. Sotop left
is equivalent toto bottom right
,bottom
is equivalent toto top
, and so on.When signifying angles for directions, you need to do some recalculation, as
0deg
used to mean horizontal towards the right (equivalent toleft
), and now it means vertical and upwards (equivalent totop
).
A full cross browser block that also looks after older browser syntax would look like this:
div {
background-image: -webkit-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
background-image: -moz-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
background-image: -ms-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
background-image: -o-repeating-linear-gradient(20deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
background-image: repeating-linear-gradient(70deg, rgb(255, 0, 0), rgb(100, 0, 0) 20px, rgb(255, 0, 0) 40px);
}
Top comments (0)