CSS Gradients

In CSS, a gradient is a type of image that consists of a progressive and smooth transition between two or more colors. CSS is a method for adding style to various web documents. Using the gradient in CSS, we can create image styling variants that can aid in the creation of an appealing webpage.

1. Linear Gradients:

These are color transitions that go up, down, left, right, and diagonally. A two-color minimum is required to create a linear gradient. Linear gradients can have more than two color elements. The gradient effect requires a starting point and a direction.

Syntax

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

The linear-gradient can be implemented in the following ways:

Top to Bottom:

The transition in this image began with white and ended with green. When the color sequence is switched, the transition will begin with green and end with white.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        height: 150px;
        background-image: linear-gradient(#ff4842, #00ab55);
    }
</style>
</head>
<body>

<h2>background-image: linear-gradient (top, bottom)</h2>
<div class="ex1"></div>

</body>
</html>

Preview

Left to Right:

The transition in this image began on the left. It begins with white and progresses to green.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        height: 150px;
        background-image: linear-gradient(to right, #ffc107 , #1890ff);
    }
</style>
</head>
<body>

<h2>background-image: linear-gradient (left, right)</h2>
<div class="ex1"></div>

</body>
</html>

Preview

Diagonal:

This transition ran diagonally from top-left to bottom-right. It begins with a green transition to a white background. It is necessary to specify both horizontal and vertical starting positions for the diagonal gradient.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        height: 150px;
        background-image: linear-gradient(to top right, #ff4842, #00ab55);
    }
</style>
</head>
<body>

<h2>background-image: linear-gradient (Diagonal)</h2>
<div class="ex1"></div>

</body>
</html>

Preview

Repeating Linear Gradient:

CSS allows the user to implement multiple linear gradients using a single function repeating-linear-gradient (). Each transition in this image has three colors with a percentage value.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        height: 150px;
        background-image: repeating-linear-gradient(#ff4842, #ffc107 15%, #1890ff 25%);
    }
</style>
</head>
<body>

<h2>background-image: repeating-radial-gradient(Repeating)</h2>
<div class="ex1"></div>

</body>
</html>

Preview

Angles on Linear Gradients:

Instead of being limited to predefined directions, CSS allows users to implement directions in Linear Gradients.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        height: 150px;
        background-image: repeating-radial-gradient(#00ab55, #ff4842 15%, #ffc107 25%);
    }
</style>
</head>
<body>

<h2>background-image: repeating-radial-gradient (Angles)</h2>
<div class="ex1"></div>

</body>
</html>

Preview

The radial-gradient can be implemented in several ways, including:

2. Radial Gradient:

By default, the fade occurs at an equal rate in CSS. The Radial Gradient with even color stops is depicted in the figure below.

Syntax

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

Radial Gradient evenly spaced color stops:

Color stops tell browsers what color to use, where to start the gradient, and where to stop. They are evenly spaced by default, but we can override this by specifying the specific color stops.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        height: 150px;
        background-image: radial-gradient(#00ab55, #ffffff, #ffc107);
    }
</style>
</head>
<body>

<h2>background-image: radial-gradient (evenly spaced color stops)</h2>
<div class="ex1"></div>

</body>
</html>

Preview

Radial Gradient unevenly spaced color stops:

While using the radial-gradient feature, CSS allows the user to vary the spacing of color stops.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        height: 150px;
        background-image: radial-gradient(#00ab55 40%, #ffffff, #ffc107);
    }
</style>
</head>
<body>

<h2>background-image: radial-gradient (unevenly spaced color stops)</h2>
<div class="ex1"></div>

</body>
</html>

Preview

CSS Backgrounds

CSS Shadows

CSS Gradients

1. Linear Gradients:

Syntax

Top to Bottom:

Example

Left to Right:

Example

Diagonal:

Example

Repeating Linear Gradient:

Example

Angles on Linear Gradients:

Example

2. Radial Gradient:

Syntax

Radial Gradient evenly spaced color stops:

Example

Radial Gradient unevenly spaced color stops:

Example

Links

Tutorials

Connect with us