# CSS Gradients

---

# **CSS Gradients**

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

* **Linear Gradients (goes down/up/left/right/diagonally)**
    
* **Radial Gradients (defined by their center)**
    

# CSS Linear Gradients

To create a linear gradient you must define at least two color stops.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686050549007/50f67b04-f02f-435e-b308-80c3d192a4d6.png align="center")

Example:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686050607820/aabc5afd-3400-4fdb-930c-2b4df2000661.png align="center")

# CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686050649855/eb32bc4b-0a9d-4647-be75-2306072f0b29.png align="center")

Example:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686050703032/6a4ebf26-b195-427f-ab8b-c61e885a16d5.png align="center")

---

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png align="left")

Download our HTML & CSS Visual Treat! ebook Here: [Click here](https://codemarch.gumroad.com/l/hxazr)