CSS Gradients

CSS property gradient allows you to set multiple colors as background on any HTML elements while also maintaining smooth transition between those colors. At least two colors need to be defined to create a gradient while the starting direction, angle as well as transparency can also be added.

CSS allows two types of gradients which are as follows.

1. Linear Gradients
2. Radial Gradients

CSS Linear Gradients

CSS linear gradients are gradients distributed from one end to the other end of an element. They can appear from left to right, top to bottom or vice-versa while you can also make them appear diagonally defining the angle of their inclination.

Syntax

background: linear-gradient(direction, color1, color2, ...);

Linear Gradient - Top to Bottom (Default)

This is the default type of linear gradient and appears from top to bottom of the defined element. The direction is not needed to be defined for top to bottom gradients.

<div class="top-bottom">TOP TO BOTTOM GRADIENT</div>

<style>
.top-bottom{
  padding: 40px;
  text-align: center;
  background: linear-gradient(#066,#d7d7d7);
}  
</style>

Linear Gradient - Left to Right

Linear gradients can be set to start from the left end of the element and then end on the right end.

<div class="left-right">LEFT TO RIGHT GRADIENT</div>

<style>
.left-right{
  padding: 40px;
  text-align: center;
  background: linear-gradient(to right,#f7f7f7,#999);
}  
</style>

Linear Gradient - Diagonal

Linear gradients can be set to appear diagonally by defining both horizontal and vertical starting points together.

<div class="bottom-right">DIAGONAL GRADIENT</div>

<style>
.bottom-right{
  padding: 40px;
  text-align: center;
  background: linear-gradient(to bottom right,#f7f7f7,#999);
}  
</style>

Diagonal Gradient Using Angles

You can also set diagonal gradients using angle values instead of direction keywordslike to left or to bottom right, etc. The angle is specified as an angle between a horizontal line and the gradient line.

<div class="angled">DIAGONAL GRADIENT USING  ANGLES</div>

<style>
.angled{
  padding: 40px;
  text-align: center;
  background: linear-gradient(120deg,#f00,#ccc);
}  
</style>

Gradients Using Multiple Colors

You can set any number of color stops within a gradient. The minimum number of color stops required to create a gradient is two though.

<div class="multiple">MULTIPLE COLOR STOPS GRADIENT</div>

<style>
.multiple{
  padding: 40px;
  text-align: center;
  background: linear-gradient(to right,#ff0000,#fff000,#00ff00);
}  
</style>

Using Transparency

Transparencycan also be maintained in gradients to create fading effects. You can define rgba color values for colors to add transparency.

<div class="transparent">TRANSPARENT GRADIENT</div>

<style>
.transparent{
  padding: 40px;
  text-align: center;
  background: linear-gradient(rgba(0,102,102,0.3),rgba(215,215,215,1));
}  
</style>

Repeating a linear-gradient

Repeating linear gradient can be displayed on a web page using repeating-linear-gradient keyword instead of linear-gradient.

<div class="repeating">REPEATING LINEAR GRADIENT</div>

<style>
.top-bottom{
  padding: 40px;
  text-align: center;
  background: repeating-linear-gradient(to right, #066, #d7d7d7 50%);
}  
</style>

CSS Radial Gradients

A radia gradient starts from the center and spreads to the boundary of an element.

SYNTAX

background: radial-gradient(shape size at position, start-color, ..., last-color);

The shape is ellipse while the size is farthest-corner and position is center by default.

Radial Gradient - Color Space Even (Default)

By default the colors in a radial gradient are evenly spaced.

<div class="radial"></div>

<style>
.radial{
  height: 200px;
  width: 200px;  
  background: radial-gradient(#ff0000,#fff000,#00ff00);
}  
</style>

Radial Gradient - Color Space Different

You can add spacing percentage along with the colors to add different spacing between the colors in a radial gradient.

<div class="space"></div>

<style>
.space{
  height: 200px;
  width: 200px;  
  background: radial-gradient(#ff0000 15%,#fff000 58%,#00ff00 88%);
}  
</style>

Set Shape

The shape parameter defines the shape of the radial gradient which be set to either ellipse or circle. The default value is ellipse.

<div class="circle"></div>

<style>
.circle{
  height: 200px;
  width: 200px;  
  background: radial-gradient(circle, #066, #d7d7d7, #000);
}  
</style>

Use of Different Size Keywords

The size parameter defines the size of the gradient which can take any of the four values listed below.

1. closest-side
2. farthest-side
3. closest-corner
4. farthest-corner

The percentage value defines the position of the center of the gradient which is 50% 50% by default. The first value is the horizontal size while the second value is the vertical size. Change in size value makes the center circle shrink to either of the sides and thus change size whereas as change in both values to an equal parameter makes the center circle of the gradient shift.

<div class="size"></div>

<style>
.size{
  height: 200px;
  width: 200px;
  background: radial-gradient(closest-corner at 75% 40%,#ff0000,#fff000,#00ff00);
}  
</style>

<div class="farthest"></div>

<style>
.farthest{
  height: 200px;
  width: 200px;
  background: radial-gradient(farthest-side at 75% 40%,#ff0000,#fff000,#00ff00);
}  
</style>

Repeating a radial-gradient

Radial gradient can be repeated using repeating-radial-gradient keyword.

<div class="repeat"></div>

<style>
.repeat{
  height: 200px;
  width: 200px;
  background: repeating-radial-gradient(#fff000 35%,#00ff00 60%);
}  
</style>

---

Try It Yourself »

---

0 Like 0 Dislike 0 Comment Share Tweet