<h2 id="css-gradients">CSS Gradients</h2>
CSS gradients let you display smooth transitions between two or more specified colors.
<h2 id="css-gradient-types">CSS Gradient Types:</h2>
<ul>
<li>Linear Gradients (goes down/up/left/right/diagonally)
</li>
<li>Radial Gradients (defined by their center)
</li>
</ul>
<h2 id="linear-gradients">Linear Gradients</h2>
Syntax
<pre><code>background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
</code></pre>Code Sample: 
<pre><code>#gradientsample {
 background-image: linear-gradient(to right, red , yellow);
}
</code></pre><h2 id="directions">Directions</h2>
<ul>
<li>to left</li>
<li>to right</li>
<li>to bottom right</li>
<li>to bottom left </li>
</ul>
<h2 id="using-angles">Using Angles</h2>
Syntax:
<pre><code>background-image: linear-gradient(angle, color-stop1, color-stop2);
</code></pre>Code Sample: 
<pre><code>#gradientsample {
 background-image: linear-gradient(180deg, red, yellow);
}
</code></pre><h2 id="using-transparency">Using Transparency</h2>
CSS gradients also support transparency, which can be used to create fading. To add transparency, introduce rgba() function.
Code Sample
<pre><code>#gradientsample {
 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</code></pre><h2 id="repeating-a-linear-gradient">Repeating a linear-gradient</h2>
The repeating-linear-gradient() function is used to repeat linear gradients:
Code Sample:
<pre><code>#gradientsample {
 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
</code></pre>

## CSS Gradients

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

## CSS Gradient Types:

- Linear Gradients (goes down/up/left/right/diagonally)

- Radial Gradients (defined by their center)


## Linear Gradients

Syntax
```
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
``` 

Code Sample: 

```
#gradientsample {
  background-image: linear-gradient(to right, red , yellow);
}
``` 

## Directions
- to left
- to right
- to bottom right
- to bottom left 


## Using Angles

Syntax:
```
background-image: linear-gradient(angle, color-stop1, color-stop2);

``` 

Code Sample: 
```
#gradientsample {
  background-image: linear-gradient(180deg, red, yellow);
}
``` 

## Using Transparency

CSS gradients also support transparency, which can be used to create fading. To add transparency, introduce rgba() function.

Code Sample
``` 
#gradientsample {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
``` 

## Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:

Code Sample:
``` 
#gradientsample {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
``` 

CSS Linear Gradient (Summary)

CSS Gradients

CSS Gradient Types:

Linear Gradients

Directions

Using Angles

Using Transparency

Repeating a linear-gradient