CSS Data Type - <gradient>

The CSS data type <gradient> is a unique kind of <image> that demonstrates a progressive transition between two or more colors.

A gradient has no intrinsic dimensions, which means, it has neither a natural or preferred size, nor a preferred ratio. The size of the gradient will match with the size of the element it is applied to.

Possible values

The CSS data type <gradient> is defined using one of the following functions as values:

  • linear-gradient(): Progressive transition between two or more colors along a straight line. Generated with the linear-gradient() function.

  • radial-gradient(): Progressive transition between two or more colors from a center point (origin). Generated with the radial-gradient() function.

  • conic-gradient(): Progressive transition between two or more colors around a circle. Generated with the conic-gradient() function.

  • repeating-linear-gradient(): Linear gradient that gets repeated to fill the space. Generated with the repeating-linear-gradient() function.

  • repeating-radial-gradient(): Radial gradient that gets repeated to fill the space. Generated with the repeating-radial-gradient() function.

Syntax

<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

CSS <gradient> - Linear gradient

The following example demonstrates the use of linear-gradient:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
   }

   .basic-linear {
      background: linear-gradient(red, yellow, green, blue, pink);
   }
</style>
</head>
<body>
   <h1>Basic linear gradient</h1>
   <div class="basic-linear"></div>
</body>
</html>

CSS <gradient> - Radial gradient

The following example demonstrates the use of radial-gradient:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
   }

   .basic-radial {
      background: radial-gradient(red, yellow, green, blue, pink);
   }
</style>
</head>
<body>
   <h1>Basic radial gradient</h1>
   <div class="basic-radial"></div>
</body>
</html>

CSS <gradient> - Conic gradient

The following example demonstrates the use of conic-gradient():

<html>
<head>
<style>
   div {
      height: 150px;
      width: 150px;
   }

   .basic-conic-gradient {
      background: conic-gradient(red, yellow);
      border-radius: 50%;
   }
</style>
</head>
<body>
   <h1>Basic Conic Gradient</h1>
   <div class="basic-conic-gradient"></div>
</body>
</html>

CSS <gradient> - Repeating linear gradient

The following example demonstrates the use of repeating-linear-gradient:

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A repeating gradient tilted 60 degrees,
   with three color stops */
   .repeat-linear {
      background-image: repeating-linear-gradient(60deg, red, yellow 7%, black 10%);
   }
</style>
</head>
<body>
   <h1>Repeating linear gradient</h1>
   <div class="repeat-linear"></div>
</body>
</html>

CSS <gradient> - Repeating radial gradient

The following example demonstrates the use of repeating-radial-gradient:

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }

   .repeat-radial {
      background: repeating-radial-gradient(
      ellipse farthest-side at 20% 20%,
      red,
      black 5%,
      yellow 5%,
      blue 10%
      );
   background: repeating-radial-gradient(
      ellipse farthest-side at 20% 20%,
      red 0 5%,
      yellow 5% 10%
      );
   }
</style>
</head>
<body>
   <h1>Repeating radial gradient</h1>
   <div class="repeat-radial"></div>
</body>
</html>
Advertisements