Understanding CSS Gradients

CSS gradients allow you to display smooth transitions between two or more colors. They are a type of `` data type and can be used anywhere an image is expected, such as the `background-image` property. Gradients are powerful because they are resolution-independent, meaning they scale perfectly without pixelation, unlike traditional image files.

There are three main types of gradients in CSS:

• Linear Gradients: Transition colors along a straight line (up, down, left, right, or diagonally).

• Radial Gradients: Transition colors radiating outwards from a central point.

• Conic Gradients: Transition colors around a central point, like a pie chart.

Linear Gradients

Linear gradients create a smooth transition of colors along a straight line. You can specify the direction and the colors with their optional stop positions.

Basic Linear Gradient Syntax

The basic syntax for a linear gradient is `linear-gradient(direction, color-stop1, color-stop2, ...)`.

.linear-gradient-basic {
    background-image: linear-gradient(red, yellow); /* Top to bottom (default) */
}

.linear-gradient-direction {
    background-image: linear-gradient(to right, red, orange); /* Left to right */
}

.linear-gradient-diagonal {
    background-image: linear-gradient(to bottom right, blue, green); /* Top-left to bottom-right */
}

Color Stops and Percentages

You can add more than two colors and specify their positions using percentages, allowing for more complex transitions.

.multi-color-gradient {
    background-image: linear-gradient(to right, red, orange 50%, yellow);
}
/* Red starts at 0%, orange reaches 50% of the gradient, then transitions to yellow */

.sharp-transition-gradient {
    background-image: linear-gradient(to right, blue 0%, blue 50%, green 50%, green 100%);
}
/* Creates a sharp line between blue and green at 50% */

Radial Gradients

Radial gradients create color transitions that radiate outward from a central point, forming circles or ellipses.

Basic Radial Gradient Syntax

The basic syntax is `radial-gradient(shape size at position, color-stop1, color-stop2, ...)`.

• Shape: `circle` or `ellipse` (default).
• Size: `closest-corner`, `farthest-corner`, `closest-side`, `farthest-side` (default `farthest-corner` for `ellipse`, `farthest-side` for `circle`).
• Position: Keywords like `center` (default), `top left`, or length/percentage values (e.g., `20% 30%`).

.radial-gradient-basic {
    background-image: radial-gradient(circle, white, black); /* White center, fades to black */
}

.radial-gradient-at-position {
    background-image: radial-gradient(at top left, yellow, green);
}

.radial-gradient-ellipse {
    background-image: radial-gradient(ellipse at center, red 0%, orange 50%, yellow 100%);
}

Conic Gradients

Conic gradients create color transitions around a central point, rotating around it rather than radiating from it. They are often used for pie charts, color wheels, or decorative effects.

Basic Conic Gradient Syntax

The basic syntax is `conic-gradient(from angle at position, color-stop1, color-stop2, ...)`.

• Angle: `from 0deg` (default is 0deg, pointing upwards).
• Position: `at center` (default), `top left`, etc.

.conic-gradient-basic {
    background-image: conic-gradient(red, yellow, green, blue, red);
}

.conic-gradient-from-angle {
    background-image: conic-gradient(from 45deg, purple, orange);
}

.conic-gradient-at-position {
    background-image: conic-gradient(at 20% 80%, white, black);
}

Repeating Gradients

You can create repeating patterns with gradients using `repeating-linear-gradient()`, `repeating-radial-gradient()`, and `repeating-conic-gradient()`. These functions work similarly to their non-repeating counterparts but will repeat the color stops you define.

.repeating-linear {
    background-image: repeating-linear-gradient(45deg, #eee, #eee 10px, #ccc 10px, #ccc 20px);
}

.repeating-radial {
    background-image: repeating-radial-gradient(circle at center, #f0f0f0, #f0f0f0 10px, #dcdcdc 10px, #dcdcdc 20px);
}