90 lines
3.6 KiB
Markdown
90 lines
3.6 KiB
Markdown
|
---
|
||
|
|
title: Linear Gradient
|
||
|
|
---
|
||
|
|
## Linear Gradient
|
||
|
|
|
||
|
|
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/linear-gradient/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||
|
|
|
||
|
|
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||
|
|
|
||
|
|
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
<!-- Please add any articles you think might be helpful to read before writing the article -->
|
||
|
|
|
||
|
|
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](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)
|