CSS3 Gradient

CSS3 Gradient

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 the 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: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

Try it now

Source Code

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

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

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

Try it now

Source Code

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

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.

General Syntax

Try it now