CSS gradients let you create smooth transitions between two or more specified colors without using images. There are mainly two types: linear-gradient and radial-gradient. You can control direction, color stops, and even create repeating patterns.

A basic linear-gradient transitions colors vertically from top to bottom by default.

Use to right, to left, to top, to bottom right, etc., to control the direction of the gradient.

You can specify angles (e.g., -45deg) to create diagonal gradients.

A radial-gradient radiates colors from the center outward in a circular or elliptical shape.

You can define color stops with percentage values to control where colors start and end.

Use repeating-radial-gradient to create repeated circular gradient patterns.