gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed formatting, removed unreliable links and added solution to Create a Gradual CSS Linear Gradient (#34416)

Browse Source 
* Update index.md

* Update index.md
This commit is contained in:
The Coding Aviator
2019-03-09 19:29:15 +05:30
committed by Randell Dawson
parent 19e48b3dc8
commit e26988bd8c
1 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
guide/english/certifications/responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient/index.md
View File

@@ -1,23 +1,38 @@
---
title: Create a Gradual CSS Linear Gradient
---
## Create a Gradual CSS Linear Gradient
## Create a Gradual CSS Linear Gradient
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.
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);
```css
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.
### Solution
## Resources
<a href='https://www.w3schools.com/css/css3_gradients.asp'>There's an extensive info on this topic available on this link.
```html
<style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background-image: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}
<a href ='https://www.youtube.com/watch?v=wTk4Wuckd0U'> Also, you might want to review this Youtube video by The Net Ninja.
</style>
<div></div>
```
#### Resources
* <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient'>There's an extensive info on this topic available on this link.</a>
* <a href='https://www.youtube.com/watch?v=wTk4Wuckd0U'> Also, you might want to review this Youtube video by The Net Ninja.</a>