freeCodeCamp/guide/english/certifications/responsive-web-design/applied-visual-design/create-a-gradual-css-linear.../index.md

24 lines
834 B
Markdown
Raw Normal View History

2018-10-19 12:53:51 +00:00
---
title: Create a Gradual CSS Linear Gradient
---
2018-10-12 19:37:13 +00:00
## Create a Gradual CSS Linear Gradient
2018-10-19 12:53:51 +00:00
2018-10-12 19:37:13 +00:00
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
The syntax is always:
```
background-image: linear-gradient(angle, color-stop1, color-stop2);
```
The colors can be used in both hex() and rgb() formats. Experiment a bit and you'll understand how easy and beautiful it is to use it.
## Resources
<a href='https://www.w3schools.com/css/css3_gradients.asp'>There's an extensive info on this topic available on this link.
<a href ='https://www.youtube.com/watch?v=wTk4Wuckd0U'> Also, you might want to review this Youtube video by The Net Ninja.