Gradient

In this tutorial, I will be showing you how to apply gradient effect in CSS.

There are three (3) types of gradients: Linear, Radial and Conic.

Linear Gradient

• Flows in a single direction. (For example: left to right, or at any angle).
• At least two colors are required.
• Defined by using linear-gradient
• Syntax is as follows: linear-gradient(direction, color-1, color-2, color-n)
• direction can be (left to right, to right, 60deg, etc)

Radial Gradient

• Consists of colors radiating outwards from the center point of the shape of the gradient.
• At least two colors are required.
• Defined by using radial-gradient
• Syntax is as follows: radial-gradient(shape size position, color-1, color-2, color-n)
• shape defines the shape of the gradient (circle, ellipse, square, etc)
• size defines the size of the shape (closet-side, closet-corner, farthest-side, farthest-corner). NB: You can use keywords also for the size.
• position defines the center of the gradient.

Conic Gradient

• Also known as angular gradient that radiates out from a central point in a 360-degree arc.
• At least two colors are required.
• Defined by using conic-gradient
• Syntax is as follows: conic-gradient(from 'angle' at 'position', 'color-list')
• angle defines the starting angle
• position defines the position of the starting point of the gradient.
• color-list defines the color and their position in the gradient.

Repeating Gradient Functions

repeating-linear-gradient() - creates linear gradient that repeats in a defined direction.

repeating-radial-gradient() - creates radial gradient that repeats in a defined direction.

repeating-conic-gradient() - creates conic gradient that repeats in a defined direction.