# How to create CSS Linear Gradient
# **What exactly is CSS linear gradient?**
CSS linear gradient function simply produces a smooth progression or transition of different colours in a desired direction and orderliness. It enables you make different colour choice in your CSS ```background ``` property and not just rely on some bland colours.
Colour gradient is a common trend in UI/UX design. If you have often worried about how to implement such design in your frontend code, that is the main purpose of this article. I intend to make it brief.
Here is what a css linear gradient looks like
![grad1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660075971707/Q0iF5KVN3.jpg align="left")
## **How about we create ours?**
In your HTML file, all you need is to create an HTML boilerplate. Simply type "!" + "↵ Enter key" and link to your CSS file. Remember to save your css file and html file in the same folder. An **HTML boilerplate** is simply a code template with the necessary tags or elements needed to start an HTML file.
![boiler.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660227488234/7Jjoch50w.png align="left")
In the ``` ``` tag, create a nested `````` element like this.
![nested div.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660226680784/5rBtGV8xL.png align="left")
## **Now, Let's write our CSS code**
![cards.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660226848023/gdBCtKwyw.png align="left")
Here is what each of the card looks like
![cards view.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660211178240/ibe45w-YI.jpg align="left")
# **CSS Linear Gradient Syntax**
Now, let's jump straight to the main action. CSS Linear gradient follows the syntax rule below
```background: linear-gradient(direction, colour start, colour transition1, ...transition2, ...transition3, colour stop)```. Transition conditionals are usually stated using percentages ```%```. This indicates the beginning or end of the colour transition.
Recall the differences in the class names in each of the `````` elements. Hence, to style each card, our ```background: linear-gradient(.....)``` attribute goes into ```.card1```, ```.card2```, ```.card3```, ```.card4```, ```.card5``` and ```.card6```.
## **Colour Direction**
The first thing you would want to do is state the direction of your colours - the way you would want your colours arranged.
From bottom to top: ``` 0deg``` , top to bottom: ``` 180deg``` , right to left: ``` 90deg``` , left to right: ``` 270deg```.
``` background: linear-gradient(0deg, red, black);```
``` background: linear-gradient(180deg, red, black);```
``` background: linear-gradient(90deg, red, black);```
``` background: linear-gradient(270deg, red, black); ```
![two.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660216880304/w9wzWnbkN.jpg align="left")
Other methods, asides the use of angle degrees in stating the colour directions include: ```to left```, ```to right```, ```to top```, ```to bottom```, ```to top right```, ```to top left```, ```to bottom left```, ```to bottom right```. Any angle between ``` 0deg``` and ``` 360deg``` can also represent the colour direction parameter. This also applies to negative angles such as ```-60deg```, ```-45deg``` and so on.
**Using other angle degrees**
```background: linear-gradient(50deg, rgb(88, 52, 52), rgb(125, 63, 177), rgb(90, 223, 123), rgb(255, 249, 249));```
```background: linear-gradient(97deg, rgb(88, 52, 52), rgb(125, 63, 177), rgb(90, 223, 123), rgb(255, 249, 249));```
```background: linear-gradient(130deg, rgb(88, 52, 52), rgb(125, 63, 177), rgb(90, 223, 123), rgb(255, 249, 249));```
```background: linear-gradient(213deg, rgb(88, 52, 52), rgb(125, 63, 177), rgb(90, 223, 123), rgb(255, 249, 249));```
![angles.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660225882877/WV5zWXk9R.jpg align="left")
## **Transition Conditionals**
The transition conditionals should be in an orderly manner, moving from the lower percentages to the higher percentages. The code snippet below explains what is happening in each card.
![explain.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660347790765/AhGtMskrL.png align="left")
![explain.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660347803841/lwV_Syayy.jpg align="left")
## **Repeating Linear Gradient**
The ```repeating-linear-gradient(...)``` function takes in similiar parameters as the ```linear-gradient(...)``` function as we have learnt so far in this technical content. This enusures the linear gradients are repeated multiple times until the background image length is completely filled.
![reapeated.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1660345545106/6wDzvgJax.png align="left")
![repeated.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1660345586542/J7nEi8WqU.jpg align="left")
Read my previous article [here](https://arafatsalam.hashnode.dev/what-exactly-is-uxui-beyond-the-buzz-buzz-figma-design)
See you in the next article. Cheers, bye!