3.6 KiB
| title |
|---|
| Linear Gradient |
Linear Gradient
This is a stub. Help our community expand it.
This quick style guide will help ensure your pull request gets accepted.
More Information:
In Linear Gradient, the colors flow in a single direction, i.e- From Left to Right, Top to Bottom, or any angle you choose.
A Linear gradient with Two colour stops
Syntax-
To create a linear gradient you must define atleast two colour stops.(They are the colours the transitions are created among).It is declared on either the background or background-image properties.
background: linear-gradient(direction, colour-stop1, colour-stop2, ...);
Note: If no direction is Specified, the transition is Top to Bottom by default
Different Gradient transitions-
Top to Bottom :
background: linear-gradient(red, yellow);
Left To 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);
Diagonal Positions :
You can also transition a gradient diagonally by specifying the horizontal and vertical starting positions, for example, top-left, or bottom-right.
Here's a sample for a gradient starting at top-left-
background: linear-gradient(to bottom right, red, yellow);
Using Angles to Specify Direction of the gradient-
You can also use angles, to be more accurate in specifying the direction of the gradient:
background: linear-gradient(angle, colour-stop1, colour-stop2);
The angle is specified as an angle between a horizontal line and the gradient line.
background: linear-gradient(90deg, red, yellow);
Using more than two colours-
You're not limited to just two colours, you can use as many comma seperated colours as you want.
background: linear-gradient(red, yellow, green);
You can also use other colour syntaxes like RGB or hex codes to specify the colors.
Hard colour stops-
You can not only use gradients to transition with fading colours, but you can also use it to change from one solid colour to another solid colour instantly
background: linear-gradient(to right,red 15%, yellow 15%);
More information- Linear-gradient on Mozilla Docs