CSS Gradient

What is Gradient?

The term "CSS gradient" describes a Cascading Style Sheets (CSS) method that enables seamless transitions between two or more colors. It enables you to add a gradient effect to different CSS properties, including text, borders, and backgrounds.

With CSS gradients, you can specify a gradual blending of colors in either a circular or elliptical shape (radial-gradient) or across a specific direction. The gradient is defined by defining at least two color stops or the hues that will be mixed together.

For Example:

An illustration of a linear gradient that changes from blue to green is shown below:

.gradient-example {
  background: linear-gradient(to right, blue, green);
}

The 'to right' keyword is used in this example's use of the linear-gradient() function to specify the gradient's direction. "Blue" and "Green" are the gradient's beginning and ending colors.

Additionally, you can specify more color stops to produce more intricate gradients.

Illustration

An illustration of a radial gradient with three color stops is as follows:

.gradient-example {
  background: radial-gradient(circle, red, yellow, green);
}

In this instance, a circular gradient is made using the radial-gradient() function. The color "red," "yellow," and "green" stand in for the color stops, while the keyword "circle" specifies the shape.

You can create various visual effects and transitions by adjusting CSS gradients' direction, shape, and color stops. They are a potent tool for creating aesthetically pleasing websites because contemporary web browsers widely support them.

Why We Use Gradient in CSS?

With the help of gradient, we can design a website even better. Some of the main reasons for using CSS gradients are:

Visual Appeal: Gradients can improve a website or web application's visual appeal. They enable you to add depth to elements and create seamless color transitions, which enhances their visual appeal.
Backgrounds: To produce captivating and lively background effects, gradients are frequently used. With the help of gradients, we can change the look and feel of a website, even if it is a subtle gradient that adds a touch of smoothness or a vibrant gradient to attract people.
Buttons and Icons: You can use gradients to give buttons and icons a glossy, three-dimensional look that stands out and encourages user interaction.
Text Effects: You can make catchy headings, titles, or other special effects by applying gradients to the text. Gradients can enhance the text's visual appeal and attention-grabbing qualities by adding depth, casting shadows, or highlighting particular passages.
Overlay and masks: Gradients can be used as overlays or masks to combine different images or design elements seamlessly. This method is frequently applied to create visually appealing transitions or effects in image sliders, banners, or hero sections.
Branding and theming: Gradients can play an important role in a brand's visual identity. You can achieve a unified and consistent look across the entire website by using gradients that complement a brand's color scheme, strengthening the brand's identity.
Responsive design: Gradients are suitable for responsive design because they can adjust to various screen sizes and orientations. To ensure a consistent visual experience across devices, they can offer fluid color transitions that adjust by the available space.

Overall, CSS gradients give web designers a wealth of creative options, enabling them to give their designs depth, dimension, and visual interest. They aid in the development of distinctive and visually appealing user interfaces that improve the web user experience.

Example

An HTML program using CSS gradients for background and text effects is shown here as an example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-background {
      height: 200px;
      background: linear-gradient(to right, #ff0000, #00ff00);
    }
    
    .gradient-text {
      font-size: 24px;
      background: linear-gradient(to right, #ff0000, #00ff00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="gradient-background"></div>
  <h1 class="gradient-text">Hello, CSS Gradient!</h1>
</body>
</html>

Explanation:

The CSS classes gradient-background and gradient-text are used in this example. The div element with the gradient-background class has a horizontal gradient from red to green, thanks to the application of a linear gradient background.

The gradient-text class applies a similar linear gradient background with a unique text effect to a h1 heading element. The text becomes transparent and lets the gradient background show through when the -webkit-text-fill-color and -webkit-background-clip properties are set to text and transparent, respectively. This creates the appearance of gradient-filled text.

Types of Gradient in CSS

There are two types of gradients in CSS:

1. Linear Gradient

In CSS, a linear gradient produces a seamless change in color along a single axis. Here is a program example and the syntax for a linear gradient:

The following syntax:

[angle]: Indicates the gradient line's direction. Degrees (deg) or keywords like to top, bottom, left, right, etc., can be used to specify it.
Color-stops 1, 2, and so forth: Specify the colors and where they should be placed along the gradient line.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      background: linear-gradient(to right, #ff0000, #00ff00);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

This example applies a linear gradient background to the element with the class gradient-example and sets its height to 200 pixels using the linear-gradient() function. The gradient shifts from red (#ff0000) on the left to green (#00ff00) on the right.

Output:

Example 2:

Here's an example of an HTML program that uses a top-to-bottom linear gradient as the background:

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      background: linear-gradient(to bottom, #ff0000, #00ff00);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

This example applies a linear gradient background to the element with the class gradient-example and sets its height to 200 pixels using the linear-gradient() function. The gradient transitions from red (#ff0000) at the top to green (#00ff00) at the bottom, as indicated by the bottom keyword.

Output:

Example 3:

Here's an example of an HTML program that uses a right-to-left linear gradient as the background:

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      background: linear-gradient(to left, #ff0000, #00ff00);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

This example applies a linear gradient background to the element with the class gradient-example and sets its height to 200 pixels using the linear-gradient() function. The gradient starts red (#ff0000) on the right and transitions to green (#00ff00) on the left, according to the top left keyword.

Output:

2. Radial Gradient

A circular or elliptical radial gradient transitions colors. It produces a seamless color change that spreads outward from a central point.

[shape]: Specifies the gradient's shape. Circle, ellipse, nearest, closest-corner, farthest-side, and farthest-corner are all possible shapes.
Color-stops 1, 2, and so forth: Define the colors and their location inside the shape.

Example:

Here's an example of an HTML program that uses a radial gradient as the background:

 <!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      width: 200px;
      background: radial-gradient(circle, #ff0000, #00ff00);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

This example uses the radial-gradient() function to apply a radial gradient background and sets the height and width of the element with the class gradient-example to 200 pixels. The gradient is circular and changes from red (#ff0000) in the middle to green (#00ff00) at the edges.

Output:

Example 2:

Here's an example of an HTML program that uses a radial gradient with evenly shaped color stops:

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      width: 200px;
      background: radial-gradient(circle at center, #ff0000 0%, #00ff00 33.3%, #0000ff 66.6%);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

This example uses the radial-gradient() function to apply a radial gradient background and sets the height and width of the element with the class gradient-example to 200 pixels. The gradient is situated in the element's middle and shaped like a circle. Three evenly spaced color stops are present:

Red is the color stop at 0% (#ff0000).

At 33.3%, the color stop is green (#00ff00).

At 66.6%, the color stop is blue (#0000ff).

Output:

Example 3:

Here's an example of an HTML program that uses a radial gradient with differently shaped color stops:

<!DOCTYPE html>
<html>
<head>
  <style>
    .gradient-example {
      height: 200px;
      width: 200px;
      background: radial-gradient(ellipse closest-side at 50% 50%, #ff0000 20%, #00ff00 50%, #0000ff 80%);
    }
  </style>
</head>
<body>
  <div class="gradient-example"></div>
</body>
</html>

This example uses the radial-gradient() function to apply a radial gradient background and sets the height and width of the element with the class gradient-example to 200 pixels. The gradient is an ellipse of 50% to the left of the element's top and 50% to its right. Three color stops are present.

At 20%, the color stops are red (#ff0000).

Green (#00ff00) is the color stop at 50%.

Blue (#0000ff) is the color stop at 80%.

Output: