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)
