CSS - Gradients

Previous
Next

In CSS, gradients are a way to create a smooth transition between two or more colors. Gradients allow you to add color and depth to various elements in your web design, such as backgrounds, borders, and text.

Overview

Following are some point to know about gradients:

Gradients Types

Gradients can be categorized as:

  • Linear gradients

  • Radial gradients

  • Conic gradients

Linear Gradients

As the name suggests, linear gradient creates a color band that flows in a single direction, i.e. from left-to-right, top-to-bottom, or at any angle.

Syntax

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

direction parameter specifies the angle or direction ( [to left | to right] || [to top | to bottom]) of the gradient.

Linear Gradients - Basic Example

In order to create a basic linear gradient, you just need two colors, which are known as color stops. You must have minimum two, but can have more than two as well.

Following example demonstrates this:

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

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

Linear Gradients - Direction Change

The linear gradients, by default, run from top-to-bottom. But the direction can be altered, by specifying a direction.

In order to make a linear gradient moving from left-to-right, you need to add an extra parameter, at the beginning of the function, starting with the word to that indicates the direction. For example:

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

   .linear-to-right {
      background: linear-gradient(to right, red, yellow);
   }
</style>
</head>
<body>
   <h1>linear gradient - direction to right</h1>
   <div class="linear-to-right"></div>
</body>
</html>

Linear Gradients - Diagonal gradient

Gradients can be created such that they run diagonally, from one corner to the other.

For example, if you want the gradient axis to start from left corner and go to the top right corner, the function should contain to top right, as parameter.

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

   .linear-diagonal {
      background: linear-gradient(to top right, red, yellow);
   }
</style>
</head>
<body>
   <h1>direction to top right</h1>
   <div class="linear-diagonal"></div>
</body>
</html>

Linear Gradients - Using Angles

An angle can also be provided to the gradient for defining the direction.

Value of 0deg sets the gradient as vertical, running from bottom to top, 90deg sets the gradient as horizontal, running from left to right. The angles specify the direction in a clockwise direction. If a negative angle value is passed, the gradient will run in anticlockwise direction.

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .linear-0deg {
      background: linear-gradient(0deg, red, yellow);
   }

   .linear-45deg {
      background: linear-gradient(45deg, red, yellow);
   }

   .linear-60deg {
      background: linear-gradient(60deg, red, yellow);
   }

   .linear-90deg {
      background: linear-gradient(90deg, red, yellow);
   }

   .linear-180deg {
      background: linear-gradient(180deg, red, yellow);
   }

   .linear-minus90deg {
      background: linear-gradient(-90deg, red, yellow);
   }
</style>
</head>
<body>
   <div class="linear-0deg">0deg</div>
   <div class="linear-45deg">45deg</div>
   <div class="linear-60deg">60deg</div>
   <div class="linear-90deg">90deg</div>
   <div class="linear-180deg">180deg</div>
   <div class="linear-minus90deg">-90deg</div>
</body>
</html>

Radial Gradients

A radial gradient is a type of gradient that consists of colors radiating outward from a central point. In a radial gradient, the colors smoothly transition from one color at the center to another color at the outer edges in a circular or elliptical pattern.

Syntax

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

The shape parameter defines the shape of the gradient (circle or ellipse), the size parameter specifies the size of the shape, and the position parameter sets the center of the gradient.

Radial Gradients - Basic Example

In order to create a basic radial gradient, you just need two colors. The center of the gradient is at 50% 50% mark, by default; where the gradient is elliptical matching with the aspect ratio of its box.

Let us see an example:

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

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

Radial Gradients - Positioning Radial Color Stops

Using the percentage or absolute length values, the color stops in a radial gradient can be positioned.

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

  .position-radial-gradient {
     background-image: radial-gradient(red 35px, yellow 25%, green 55%);
   } 
</style>
</head>
<body>
   <h1>Position radial color stops</h1>
   <div class="position-radial-gradient"></div>
</body>
</html>

Radial Gradients - Positioning Of Center

The center of the radial gradient can be positioned either using the keyterms, percentage or absolute length values. If only one value, i.e., length or percentage, is given, then the same would be repeating; else the order of position from left and position from top will be repeated.

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

  .center-gradient {
      background-image:
         radial-gradient(
            at 0% 50%,
            lightgreen 30px,
            blue 60%,
            magenta 20%
   );
}
</style>
</head>
<body>
   <h1>Radial gradient center position</h1>
   <div class="center-gradient"></div>
</body>
</html>

Radial Gradients - Sizing

The size of the radial gradients can be specified, unlike linear gradients.

Possible values are:

  • farthest-corner (default value)

  • closest-corner

  • closest-side

  • farthest-side

Size of the circle can also be changed using a length value, and the ellipses using a length or percentage value.

Radial Gradients - closest-side Value For Circle

Following example demonstrates using closest-side value:

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

  .closest-side-gradient {
      background-image: radial-gradient(circle closest-side, red, yellow);
   }
</style>
</head>
<body>
   <h1>closest-side</h1>
   <div class="closest-side-gradient"></div>
</body>
</html>

Radial Gradients - farthest-corner Value for ellipse

Following example demonstrates using farthest-corner value:

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

  .farthest-corner-gradient {
      background: radial-gradient(
         ellipse farthest-corner at 80% 80%,
         red,
         yellow 10%,
         green 50%,
         orange
      );
   }
</style>
</head>
<body>
   <h1>farthest-corner</h1>
   <div class="farthest-corner-gradient"></div>
</body>
</html>

Radial Gradients - Percentage (ellipses) And Length (circle) Value

Following example demonstrates using percentage for ellipses and length value for circle:

<html>
<head>
<style>
   div {
      height: 150px;
      width: 250px;
      display: inline-block;
   }

  .percentage-ellipse-gradient {
      background: radial-gradient(
         ellipse 80% 80%,
         red,
         yellow 10%,
         green 50%,
         peachpuff
      );
  }
   .length-circle-gradient {
   background: radial-gradient(
      circle 50px,
      red 30px,
      yellow 20px,
      green 10px,
      peachpuff
   );
   }
</style>
</head>
<body>
   <h1>Percentage & Length value</h1>
   <div>
   <h2>ellipse</h2>
   <div class="percentage-ellipse-gradient"></div>
   </div>

   <div>
   <h2>circle</h2>
   <div class="length-circle-gradient"></div>
   </div>
</body>
</html>

Radial Gradients - Stacked

Radial gradients can be stacked just like linear gradients. The gradient specified first will be placed on the top and the one at the last will be placed at the bottom.

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

   .stacked-radial-gradient {
      background:
         radial-gradient(
         circle at 50% 0,
         rgba(100, 0, 0, 0.5),
         rgba(255, 0, 0, 0) 50%
         ),
         radial-gradient(
         circle at 26.7% 75%,
         rgba(0, 0, 198, 0.5),
         rgba(0, 0, 200, 0) 50%
         ),
         radial-gradient(
            circle at 93.3% 75%,
            rgba(0, 208, 0, 0.5),
            rgba(0, 210, 0, 0) 50%
         ) peachpuff;
      border-radius: 20%;
   }
</style>
</head>
<body>
   <h1>Stacked Radial Gradient</h1>
   <div class="stacked-radial-gradient"></div>
</body>
</html>

Conic Gradients

A conic gradient, also known as a conical gradient or angular gradient, is a type of gradient in which colors are arranged in a circular or conical pattern, radiating out from a central point in a 360-degree arc.

  • Unlike a radial gradient, which radiates colors outward in a circular or elliptical pattern, a conic gradient creates a color transition in a pie-shaped or conical manner, as if you were shining a spotlight in a specific direction.

  • Though the conic gradient is similar to radial gradient in terms of syntax, the color stops are positioned around a gradient arc, the circumference of a circle.

  • The color stops can not be represented in terms of absolute length values. It can have only percentage or degrees.

  • The conic gradient is similar to radial gradient, where you can position the center of the gradient. And at the same time, it is similar to linear gradient, where you can change the angle of the gradient.

Syntax

conic-gradient([ from <angle> ]? [ at <position> ]?,<color-stop-list> )

  • <position> (optional): Specifies the position of the starting point of the gradient. It can be a percentage or a keyword like center.

  • <angle> (optional): Specifies the starting angle of the gradient in degrees.

  • <color-stop-list> : Defines the colors and their positions in the gradient.

Conic Gradients - Basic Example

In order to create a basic conic gradient, you just need two colors. The center of the gradient is at 50% 50% mark, by default; with the start of the gradient is facing up.

Let us see an example of basic 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>

Conic Gradients - Positioning Of Conic Center

The center of the conic gradient can be positioned using the keyterms, percentage, or absolute lengths, with the keyword at.

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

   .position-center-gradient {
      background: conic-gradient(at 0% 20%, red 10%, gold 40%, green 50%);
   }
</style>
</head>
<body>
   <h1>Position Center Gradient</h1>
   <div class="position-center-gradient"></div>
</body>
</html>

Conic Gradients - Angle Change

  • The color stops are positioned at equal distances around the circle.

  • from keyword can be used at the beginning of the syntax, followed by an angle or length value.

  • All the color stops can be positioned differently, using the angle or length value after them.

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

   .angle-change-gradient {
      background: conic-gradient(from 35deg, red 10%, gold 50%, green 75%, lightgreen);
      border-radius: 30%;
   }
</style>
</head>
<body>
   <h1>Angle Change Gradient</h1>
   <div class="angle-change-gradient"></div>
</body>
</html>

Repeating Gradients

By default the linear-gradient(), radial-gradient(), and conic-gradient() functions do not support the repetition of color stops.

CSS offers a set of other functions that support the repetition of color stops, which are repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient().

  • The length of the repeated gradient line or arc corresponds to the distance between the initial color stop value and the final color stop length value.

  • When the first color stop has just one color and no color stop length value, the value defaults to 0.

  • When the last color stop has just one color and no color stop length value, the value defaults to 100%.

  • When neither is specified, the gradient line is 100%, which means that linear and conic gradients will not repeat. Only the radial gradient will repeat, when the radius of the gradient is smaller than the length between center of the gradient and farthest corner.

  • When the initial color stop is defined with a value greater than 0, the gradient will repeat as long as the gap between the first and last color stops is less than 100% or 360 degrees.

Repeating Linear Gradients - Example

Here is an example of repeating linear gradient, where an angle is defined along with color stops and their length value:

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

   .repeat-linear-gradient {
      background: repeating-linear-gradient(
         30deg,
         blue,
         blue 5px,
         lightgreen 5px,
         lightgreen 10px
      );
   }
</style>
</head>
<body>
   <h1>Repeating Linear Gradient</h1>
   <div class="repeat-linear-gradient"></div>
</body>
</html>

Repeating Radial Gradients - Example

Here is an example of repeating radial gradient, where the starting point is defined along with color stops and their length values:

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

   .repeat-radial-gradient {
      background: repeating-radial-gradient(
      circle at 0 0,
      blue,
      blue 10px,
      lightgreen 10px,
      lightgreen 20px
      );
   }
</style>
</head>
<body>
   <h1>Repeating Radial Gradient</h1>
   <div class="repeat-radial-gradient"></div>
</body>
</html>

Repeating Conic Gradients - Example

Here is an example of repeating conic gradient, where the starting angle is defined along with color stops and their values in degrees:

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

   .repeat-conic-gradient {
      background: repeating-conic-gradient(
      from 0deg, 
      blue 0deg 45deg, 
      lightgreen 45deg 60deg);
   }
</style>
</head>
<body>
   <h1>Repeating Conic Gradient</h1>
   <div class="repeat-conic-gradient"></div>
</body>
</html>

Multiple Repeating Gradients

Multiple gradients can be repeated alongside. It can be either linear or radial gradients.

Here is an example where repeating-radial-gradient is used multiple times to create the effect:

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

   .multiple-gradient {
  background:
      repeating-radial-gradient(
         circle at 80% 50%,
         rgba(0, 255, 0, 0.2),
         rgba(0, 255, 0, 0.2) 15px,
         rgba(255, 255, 255, 0.5) 15px,
         rgba(255, 255, 255, 0.5) 30px
      ) top left no-repeat,
      repeating-radial-gradient(
         circle at 20% 50%,
         rgba(0, 255, 0, 0.25),
         rgba(0, 255, 0, 0.25) 10px,
         rgba(255, 255, 255, 0.5) 10px,
         rgba(255, 255, 255, 0.5) 20px
      ) bottom left no-repeat green;
   }
</style>
</head>
<body>
   <h1>Multiple Repeating Gradients</h1>
   <div class="multiple-gradient"></div>
</body>
</html>

CSS Gradients - As Borders

The CSS gradients can be used to create fancy borders as well. You can use the gradients in wide variety to create effects in the border patterns.

Here is an example of use of gradients in creation of borders:

<html>
<head>
<style>
   .card {
      width: 350px; 
   }

   .border-gradient {
      background-image: radial-gradient(green 35%, lightgreen 55%);
      background-size: 8px 8px;
      border-radius: 16px;
      padding: 35px;
   }

   .sample-div {
      background-image: url('images/border.png');
      border-radius: 8px;
      padding: 35px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="card">
      <div class="border-gradient">
        <div class="sample-div">Check my border</div>
      </div>
    </div>
</body>
</html>

Color Declaration & Effects

All the three types of CSS gradients can produce the gradient using a range of varied position-dependent colors. You can use two or more than two colors to combine and create smooth color transitions.

Use of more than two colors

Minimum two colors are required to create a gradient, but you need not limit yourself while selecting the number of colors. The colors are evenly spaced along the gradient, by default.

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .linear-more-than-two {
      background: linear-gradient(blue, magenta, red,yellow, orange);
   }
</style>
</head>
<body>
   <div class="linear-more-than-two"></div>
</body>
</html>

Positioning Color Stops

The position of the color stops can be easily changed.

  • You can either give each color stop a zero, one, or two percentage values.

  • Or absolute length values can be specified for radial and linear gradients.

  • In case of giving a percentage value, the starting point of the gradient is represented by 0%; whereas the ending point is represented by 100%.

  • Values outside this range can also be given to get the desired result.

  • In case no position or location is specified, the position of the color stop is automatically calculated, such that the first color starts from 0% and the last color stop ending at 100%. Any other color present will be half way between the adjacent colors.

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .linear-position {
      background: linear-gradient(to right, blue 15px, magenta 33%, red 66%,yellow 60%, orange 100%);
}

</style>
</head>
<body>
   <div class="linear-position"></div>
</body>
</html>

Creating Hard Lines

A hard line can be created in between two colors, such that no smooth transition can be seen. To achieve this result you can use the following syntax.

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .linear-hard-line {
      background: linear-gradient(to top right, green 50%, orange 50%);
   }
</style>
</head>
<body>
   <div class="linear-hard-line"></div>
</body>
</html>

Gradient Hints

As you know the color stops are evenly spaced from each other. But a color hint can be provided, that can shift the mid-point of transition to the specified point, along the gradient.

Refer the example given below, where the midpoint is shifted from 50% to 20%.

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .linear-gradient-hint {
      background: linear-gradient(green, 20%, orange);
   }
</style>
</head>
<body>
   <div class="linear-gradient-hint"></div>
</body>
</html>

Color Bands & Stripes

In order to create a striped effect, the second color stop for each color is set at the same location as the first color stop for the adjacent color.

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .linear-gradient-stripes {
      background: linear-gradient(
         to right,
         green 20%,
         lightgreen 20% 40%, 
         orange 40% 60%,
         yellow 60% 80%,
         red 80%);
   }
</style>
</head>
<body>
   <div class="linear-gradient-stripes"></div>
</body>
</html>

Overlaying Gradients

Multiple backgrounds can be layered, to give a transparent effect. These backgrounds are stacked starting from top to bottom, with the first background placed on top.

<html>
<head>
<style>
   div {
      height: 200px;
      width: 500px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .layered-gradient {
      background: linear-gradient(to right, transparent, tomato),
      url("images/border.png");
   }
</style>
</head>
<body>
   <div class="layered-gradient"></div>
</body>
</html>

Stacked Gradients

One gradient can be stacked over other gradients. Just make sure the gradient at the top should not be completely opaque, so that the gradients below it can be seen.

<html>
<head>
<style>
   div {
      height: 200px;
      width: 500px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .stacked-linear {
      background: linear-gradient(90deg, rgba(221,0,0,0.2),rgba(100,0,0,0.5)),
         linear-gradient(220deg, rgba(067,0,0,0.1) 70.71%, rgba(167,20,67,0.7) 38%),
         linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%);
   }
</style>
</head>
<body>
   <div class="stacked-linear"></div>
</body>
</html>

Related Functions

The following table lists all the functions related to CSS gradients:

Gradient Type Description
linear-gradient() Type of gradient in which colors transition in a straight line from one point to another.
radial-gradient() Type of gradient that consists of colors radiating outward from a central point.
conic-gradient() Type of gradient in which colors are arranged in a circular or conical pattern.
repeating-linear-gradient() Allows you to create a linear gradient pattern that repeats in a specified direction.
repeating-radial-gradient() Allows you to create a repeating radial gradient pattern.
repeating-conic-gradient() Allows you to create a repeating conic gradient pattern.
Print Page
Previous
Next
Advertisements