![]() You can also use other color syntaxes like RGB or hex codes to specify the colors. background: linear-gradient(red, yellow, green) ![]() You’re not limited to just two colors – you can use as many comma separated colors as you want. background: linear-gradient(90deg, red, yellow) Using more than two colors ![]() The angle is specified as an angle between a horizontal line and the gradient line. You can also use angles, to be more accurate in specifying the direction of the gradient: background: linear-gradient(angle, colour-stop1, colour-stop2) Here’s a sample for a gradient starting from the top-left: background: linear-gradient(to bottom right, red, yellow) Using angles to specify the direction of the gradient You can also transition a gradient diagonally by specifying the horizontal and vertical starting positions, for example, top-left, or bottom-right. To make it left to right, you add an additional parameter at the beginning of the linear-gradient() starting with the word to which indicates the direction: background: linear-gradient(to right, red, yellow) Examples Top to bottom: background: linear-gradient(red, yellow) If no direction is specified, the default transition is top to bottom. background: linear-gradient(direction, colour-stop1, colour-stop2. It is declared on either the background or background-image properties. They are the colors the transitions are created among. webkit-linear-gradient Safari 5.1+ iOS 5+ Android. To create a linear gradient you must define at least two color stops. Currently only gradients as background images (through the background property) are supported. A linear gradient with two color stops Syntax In a linear gradient, the colors flow in a single direction, for example from left to right, top to bottom, or any angle you choose.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |