CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors. Gradients are created with CSS image types, and they are typically used as background-image or background.

1. Linear Gradients

Linear gradients go down, up, left, right, or diagonally. You can also specify the exact angle.

/* Standard syntax: direction, color-stop1, color-stop2, ... */
.box {
    background: linear-gradient(to bottom, blue, white);
    background: linear-gradient(135deg, green, yellow);
}

2. Radial Gradients

A radial gradient is defined by its center point. It radiates outwards from the center.

/* Standard syntax: shape size at position, start-color, ..., last-color */
.box {
    background: radial-gradient(circle, red, yellow, green);
}

Opacity and Transparency

CSS3 gradients also support transparency, which can be used to create fading effects using rgba() colors.

.fading {
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}