So, that is why the complete syntax appears like this: They still need the vendor prefix ( -webkit-, -moz-, -ms- and -o-). Unfortunately, at the time of this writing, all current browsers have yet to support the standard syntax. The snippet above will create the following rainbow. 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.īackground-image: linear-gradient(top, red, orange, yellow, green, blue, indigo, violet) The snippet above will lower the color intensity by 20%, and the gradient will turn out like this: Multiple Colors To create the effect we need to translate the color hex into rgba mode and lower the alpha channel.īackground-image: linear-gradient(top, rgba(255,90,0,0.2), rgb(255,174,0,0.2)) Now let’s change the color stop, and this time we will specify 50% for the first color and 51% for the second color, and let’s see how it turns out īackground-image: linear-gradient(top, #FF5A00 50%, #FFAE00 51%) Ĭreating transparency in gradient is also possible. The snippet above will create a gradient like what we saw earlier (no difference) but now we specify the color stop position It works like the previous value, only that if it is the last color applied, and we do not specified the stop position, a value of 100% will be taken as the default. The stop position actually is optional the browser is clever enough to determine the proper position, so when we don’t specify the first color’s stop the browser will take 0% as the default.Īnd, the next value is the second color combination. The second value of the function will tell the first color information and its stop position which is stated in percentage. The snippet above will create the following color gradient: Here is an example:īackground-image: linear-gradient(45deg, #FF5A00, #FFAE00) We can also create a diagonal gradient using angle degree as the gradient starting position. You can also use bottom to do the opposite, or else right and left. It’s actually simpler and quite self-explanatory and it will also create the following gradient. The snippet above is the official version from W3C to create gradients. You can use a descriptive keyword, like top to start the gradient flowing from the top īackground-image: linear-gradient(top, #FF5A00, #FFAE00) The first value defines the gradient starting position. So let’s dig into each part of the syntax one by one to make things clearer.įirst of all, linear gradient is declared with the linear-gradient() function. If we take a look at the complete syntax for gradient, it looks a little overstuffed, which could lead to confusion for some people.īackground-image: -webkit-linear-gradient(top, #FF5A00 0%, #FFAE00 100%) īackground-image: -moz-linear-gradient(top, #FF5A00 0%, #FFAE00 100%) īackground-image: -ms-linear-gradient(top, #FF5A00 0%, #FFAE00 100%) īackground-image: -o-linear-gradient(top, #FF5A00 0%, #FFAE00 100%) īackground-image: linear-gradient(top, #FF5A00 0%, #FFAE00 100%) Creating GradientsĪs the spec says gradients in CSS3 is an image, it has no special property like other new feature addition, so it is declared using the background-image property instead. If you have played around with gradients in CSS3 you are probably familiar with the two methods: radial and linear gradient. 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 allowing the website load faster. Gradient is a great color feature addition in CSS3.
0 kommentar(er)
