CSS Gradients

CSS gradients are the process of displaying a smooth transition between two or more colors. It includes both linear and radial gradients.

The gradient is divided into two parts:

1.0 Linear Gradient
2.0 Radial Gradient

Linear Gradient

The linear gradient will be seen in a straight line and at least two colors should be required. Its default direction is top to bottom. The colors that are used in linear-gradient are called color stops.

General Syntax

    
    linear-gradient(direction, color-stop1, color-stop2, ...)

Linear Gradient: Top to Bottom

Please keep in mind that the default gradient is top to bottom. Let us understand it with the help of an example.

General Syntax

      linear-gradient(direction, color-stop1, color-stop2, ...)

Try it now

Source Code

          .gradient {
 /* Fallback for browsers that don't support gradients */
 background: red;
 /* For Safari 5.1 to 6.0 */
 background: -webkit-linear-gradient(orange, pink);
 /* For Internet Explorer 10 */
 background: -ms-linear-gradient(orange, pink);
 /* Standard syntax */
 background: linear-gradient(orange, pink);
}

Try it now

Linear Gradient: Left to Right

To create a linear gradient from left to right assign gradient direction to the left to right.

Source Code

          .gradient {
 /* Fallback for browsers that don't support gradients */
 background: red;
 /* For Safari 5.1 to 6.0 */
 background: -webkit-linear-gradient(left, red, yellow);
 /* For Internet Explorer 10 */
 background: -ms-linear-gradient(left, red, yellow);
 /* Standard syntax */
 background: linear-gradient(to right, red, yellow);
}

Try it now

Linear Gradient: Diagonal

To create diagonal gradient, assign gradient direction to bottom left & top top right, top left & to bottom right, bottom right & to top left, top right & to bottom left.

Source Code

          .gradient {
 /* Fallback for browsers that don't support gradients */
 background: red;
 /* For Safari 5.1 to 6.0 */
 background: -webkit-linear-gradient(bottom left, red, yellow);
 /* For Internet Explorer 10 */
 background: -ms-linear-gradient(bottom left, red, yellow);
 /* Standard syntax */
 background: linear-gradient(to top right, red, yellow);
}

Try it now

Gradient Using Angles

You can replace gradient direction (to bottom, to top, to right, to left, to bottom right, etc.) with angles to more control over the direction of the gradient. Please keep in mind that 0deg refers to bottom-to-top, 90deg refers to left-to-right and 180deg is equivalent to "to the bottom".

General Syntax

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

Try it now

Source Code

          .gradient {
 /* Fallback for browsers that don't support gradients */
 background: red;
 /* For Safari 5.1 to 6.0 */
 background: -webkit-linear-gradient(0deg, red, yellow);
 /* For Internet Explorer 10 */
 background: -ms-linear-gradient(0deg, red, yellow);
 /* Standard syntax */
 background: linear-gradient(90deg, red, yellow);
}

Try it now

Repeating the Linear Gradients

Repeating linear gradient can be shown using the repeating-linear-gradient() function. Let us understand it with the help of an example.

Source Code

          .gradient {
 /* Fallback for browsers that don't support gradients */
 background: white;
 /* For Safari 5.1 to 6.0 */
 background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
 /* For Internet Explorer 10 */
 background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
 /* Standard syntax */
 background: repeating-linear-gradient(black, white 10%, lime 20%);
}

Try it now

Linear Gradients Using Multiple Color Stops

Linear gradient can also be created using multiple color stops. Let us see it with the help of an example.

Source Code

          .gradient {
 /* Fallback for browsers that don't support gradients */
 background: red;
 /* For Safari 5.1 to 6.0 */
 background: -webkit-linear-gradient(red, yellow, lime);
 /* For Internet Explorer 10 */
 background: -ms-linear-gradient(red, yellow, lime);
 /* Standard syntax */
 background: linear-gradient(red, yellow, lime);
}

Try it now

Radial Gradient

A radial gradient is a smooth transition from one color to another. It smoothly spreads outward in a circular or elliptical shape from a single point and the direction of the gradient is not straight. The Radial Gradient must have at least 2 colors.

General Syntax

      radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Try it now

Source Code

          .radial_gradient {
 width: 100%;
 height: 50vh;
 background: -webkit-radial-gradient(#f60 10%, #fc0 25%, #0099da 60%);
 background: -o-radial-gradient(#f60 10%, #fc0 25%, #0099da 60%);
 background: -moz-radial-gradient(#f60 10%, #fc0 15%, #0099da 60%);
 background: radial-gradient(#f60 10%, #fc0 25%, #0099da 60%);
}

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4