CSS Gradients

CSS gradients allow you to create smooth transitions between two or more colors. They can be linear, radial, or conic. Here’s a brief overview of the types of gradients in CSS:

1. Linear Gradient

A linear gradient transitions colors along a straight line.

Syntax:

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

Example:

.element {
  background: linear-gradient(to right, red, yellow);
}

• to right: The gradient goes from left to right.
• red, yellow: The colors transition from red to yellow.

2. Radial Gradient

A radial gradient transitions colors outward from a central point.

Syntax:

background: radial-gradient(shape size at position, color1, color2, ...);

Example:

.element {
  background: radial-gradient(circle, red, yellow, green);
}

• circle: The gradient is circular.
• red, yellow, green: Colors transition from red at the center to green at the edges.

3. Conic Gradient

A conic gradient transitions colors around a central point, like a pie chart.

Syntax:

background: conic-gradient(from angle, color1, color2, ...);

Example:

.element {
  background: conic-gradient(from 0deg, red, yellow, green, red);
}

• from 0deg: The gradient starts at the top (0 degrees).
• red, yellow, green, red: Colors transition in a circular pattern.