{"id":15095,"date":"2019-10-05T16:34:05","date_gmt":"2019-10-05T08:34:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15095"},"modified":"2022-07-15T17:06:30","modified_gmt":"2022-07-15T09:06:30","slug":"css3-linear-gradient","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-linear-gradient\/","title":{"rendered":"A Guide to CSS3 Linear Gradients"},"content":{"rendered":"

Gradient<\/strong> is a great color feature addition in CSS3<\/a>. Rather than only add a single color, we can now add multiple color combinations in one declaration block without relying on images, which could decrease the HTTP request in our website<\/a> allowing the website load faster.<\/p>\n

If you have played around with gradients in CSS3 you are probably familiar with the two methods: radial and linear gradient. Today\u2019s post will be about the latter.<\/p>\n

Creating Gradients<\/h2>\n

As the spec says gradients in CSS3 is an image<\/a>, it has no special property like other new feature addition, so it is declared using the background-image<\/code> property instead.<\/p>\n

If we take a look at the complete syntax for gradient, it looks a little overstuffed<\/em>, which could lead to confusion for some people.<\/p>\n

\r\ndiv {\r\n\tbackground-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n\tbackground-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n\tbackground-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n\tbackground-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n\tbackground-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n}\r\n<\/pre>\n
So let\u2019s dig into each part of the syntax one by one to make things clearer.<\/p>\n
First of all, linear gradient is declared with the linear-gradient()<\/code> function. The function has three primary values. The first value defines the gradient starting position. You can use a descriptive keyword, like top<\/code> to start the gradient flowing from the top<\/strong>;<\/p>\n
\r\ndiv {\r\n\tbackground-image: linear-gradient(top, #FF5A00, #FFAE00);\t\r\n}  \r\n<\/pre>\n
The snippet above is the official version from W3C<\/a> to create gradients. It\u2019s actually simpler and quite self-explanatory and it will also create the following gradient.<\/p>\n
\"gradient<\/figure>\n
You can also use bottom<\/code> to do the opposite, or else right<\/code> and left<\/code>.<\/p>\n
We can also create a diagonal gradient using angle degree<\/code> as the gradient starting position. Here is an example:<\/p>\n
\r\ndiv {\r\n\tbackground-image: linear-gradient(45deg, #FF5A00, #FFAE00);\r\n}\r\n<\/pre>\n
The snippet above will create the following color gradient:<\/p>\n
\"gradient<\/figure>\n
The second value of the function will tell the first color<\/strong> information and its stop position<\/strong> which is stated in percentage. The stop position actually is optional; the browser is clever enough to determine the proper position, so when we don\u2019t specify the first color\u2019s stop the browser will take 0%<\/code> as the default.<\/p>\n
And, the next value is the second color<\/strong> combination. It works like the previous value, only that if it is the last color applied, and we do not specified the stop position<\/strong>, a value of 100%<\/code> will be taken as the default. Now, let\u2019s look at the example below:<\/p>\n
\r\ndiv {\r\n\tbackground-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n}\r\n<\/pre>\n
The snippet above will create a gradient like what we saw earlier (no difference) but now we specify the color stop position;<\/p>\n
\"gradient<\/figure>\n
Now let\u2019s change the color stop<\/strong>, and this time we will specify 50%<\/code> for the first color and 51%<\/code> for the second color, and let\u2019s see how it turns out;<\/p>\n
\r\ndiv {\r\n\tbackground-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%);\r\n}\r\n<\/pre>\n
\"gradient<\/figure>\n
Transparency<\/h2>\n
Creating transparency<\/code> in gradient is also possible. To create the effect we need to translate the color hex<\/code> into rgba<\/code> mode and lower the alpha channel.<\/p>\n
\r\ndiv {\r\n\tbackground-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2));\r\n}\t\r\n<\/pre>\n
The snippet above will lower the color intensity by 20%<\/code>, and the gradient will turn out like this:<\/p>\n
\"gradient<\/figure>\n
Multiple Colors<\/h2>\n
Should you want more colors to be added, just add the colors next to another with a comma delimiter and let the browser determine each color stop position.<\/p>\n
\r\ndiv {\r\n\tbackground-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);\r\n}\r\n<\/pre>\n
The snippet above will create the following rainbow.<\/p>\n
\"gradient<\/figure>\n
Browser Compatibility<\/h2>\n
Unfortunately, at the time of this writing, all current browsers have yet to support the standard syntax. They still need the vendor prefix (-webkit-<\/code>, -moz-<\/code>, -ms-<\/code> and -o-<\/code>). So, that is why the complete syntax appears like this:<\/p>\n
\r\ndiv {\r\n\tbackground-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n\tbackground-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n\tbackground-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n\tbackground-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n\tbackground-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%);\r\n}\r\n<\/pre>\n
On the other hand, the Internet Explorer<\/a>, specifically version 9 and lower, is far from the standard. The gradient in IE9<\/strong> and below is declared with filter<\/code>, so if we want to add gradient on those browsers, we have to write something like this;<\/p>\n
\r\ndiv {\r\n\tfilter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF5A00, endColorstr=#FFAE00);\r\n}\r\n<\/pre>\n
The filter<\/code> has its limitations: first, it does not allow more than three colors added, and creating the transparency effect is also a bit tricky \u2013 it does not allow rgba<\/code>, but the IE filter<\/code> uses #ARGB<\/code>;<\/p>\n
\r\ndiv {\r\n\tfilter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF5A00, endColorstr=#33FFAE00);\r\n}\r\n<\/pre>\n
Here is a tool to help you convert rgba<\/code> to #ARGB<\/code><\/a>.<\/p>\n