CSS linear-gradient()

The CSS linear-gradient() function is used to define the background-image property, to set the gradient colored background that changes the color linearly. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd {background-image: linear-gradient(red, green, black, purple);
            color: white; padding: 20px;}
   </style>
</head>
<body>
   
   <div id="myd">
      <h2>background-image: linear-gradient() Example</h2>
      <p>This is an example of <b>background-image: linear-gradient()</b> in CSS.</p>
   </div>
   
</body>
</html>

Output

background-image: linear-gradient() Example

This is an example of background-image: linear-gradient() in CSS.

The word gradient means increase/decrease in the magnitude of color. That is, the color gets changed/transitioned smoothly.

CSS linear-gradient() Syntax

The syntax of linear-gradient() function in CSS, is:

background-image: linear-gradient(direction, colorStop1, colorStop2, ..., colorStopN);

Note - The direction is used to define the direction or angle to where the change of colors appears.

CSS linear-gradient() Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a, #b, #c, #d, #e, #f, #g, #h, #i, #j, #k {color: white; padding: 30px 20px; margin-bottom: 20px;}
      #a {background-image: linear-gradient(red, green, black, purple);}
      #b {background-image: linear-gradient(to right, red, green, black, purple);}
      #c {background-image: linear-gradient(to left, red, green, black, purple);}
      #d {background-image: linear-gradient(to top, red, green, black, purple);}
      #e {background-image: linear-gradient(to right bottom, red, green, black, purple);}
      #f {background-image: linear-gradient(to bottom right, red, green, black, purple);}
      #g {background-image: linear-gradient(0deg, red, green, black, purple);}
      #h {background-image: linear-gradient(90deg, red, green, black, purple);}
      #i {background-image: linear-gradient(180deg, red, green, black, purple);}
      #j {background-image: linear-gradient(270deg, red, green, black, purple);}
      #k {background-image: linear-gradient(360deg, red, green, black, purple);}
   </style>
</head>
<body>
   
   <div id="a">
      <h3>background-image: linear-gradient(red, green, black, purple)</h3>
   </div>
   <div id="b">
      <h3>background-image: linear-gradient(to right, red, green, black, purple)</h3>
   </div>
   <div id="c">
      <h3>background-image: linear-gradient(to left, red, green, black, purple)</h3>
   </div>
   <div id="d">
      <h3>background-image: linear-gradient(to top, red, green, black, purple)</h3>
   </div>
   <div id="e">
      <h3>background-image: linear-gradient(to right bottom, red, green, black, purple)</h3>
   </div>
   <div id="f">
      <h3>background-image: linear-gradient(to bottom right, red, green, black, purple)</h3>
   </div>
   <div id="g">
      <h3>background-image: linear-gradient(0deg, red, green, black, purple)</h3>
   </div>
   <div id="h">
      <h3>background-image: linear-gradient(90deg, red, green, black, purple)</h3>
   </div>
   <div id="i">
      <h3>background-image: linear-gradient(180deg, red, green, black, purple)</h3>
   </div>
   <div id="j">
      <h3>background-image: linear-gradient(270deg, red, green, black, purple)</h3>
   </div>
   <div id="k">
      <h3>background-image: linear-gradient(360deg, red, green, black, purple)</h3>
   </div>
   
</body>
</html>

Output

background-image: linear-gradient(red, green, black, purple)

background-image: linear-gradient(to right, red, green, black, purple)

background-image: linear-gradient(to left, red, green, black, purple)

background-image: linear-gradient(to top, red, green, black, purple)

background-image: linear-gradient(to right bottom, red, green, black, purple)

background-image: linear-gradient(to bottom right, red, green, black, purple)

background-image: linear-gradient(0deg, red, green, black, purple)

background-image: linear-gradient(90deg, red, green, black, purple)

background-image: linear-gradient(180deg, red, green, black, purple)

background-image: linear-gradient(270deg, red, green, black, purple)

background-image: linear-gradient(360deg, red, green, black, purple)

Note - To apply linear-gradient() as background, we need to define at least two colors.

CSS linear-gradient() Example with Different Degrees

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{color:white; height: 100px; text-align:center; margin: 20px 0;}
      .a{background: linear-gradient(0deg, green, red);}
      .b{background: linear-gradient(90deg, green, red);}
      .c{background: linear-gradient(180deg, green, red);}
      .d{background: linear-gradient(360deg, green, red);}
      .e{background: linear-gradient(-90deg, green, red);}
      .f{background: linear-gradient(-180deg, green, red);}
      .g{background: linear-gradient(-360deg, green, red);}
   </style>
</head>
<body>

   <div class="a"> 0<sup>0</sup> ( 0deg ) </div>
   <div class="b"> 90<sup>0</sup> ( 90deg ) </div>
   <div class="c"> 180<sup>0</sup> ( 180deg ) </div>
   <div class="d"> 360<sup>0</sup> ( 360deg ) </div>
   <div class="e"> -90<sup>0</sup> ( -90deg ) </div>
   <div class="f"> -180<sup>0</sup> ( -180deg ) </div>
   <div class="g"> -360<sup>0</sup> ( -360deg ) </div>

</body>
</html>

Output

0⁰ ( 0deg )

90⁰ ( 90deg )

180⁰ ( 180deg )

360⁰ ( 360deg )

-90⁰ ( -90deg )

-180⁰ ( -180deg )

-360⁰ ( -360deg )

CSS Online Test

« Previous Tutorial Next Tutorial »