Creating Background Gradients

Gradients allow you to create smooth transitions between two or more colors, providing a sleek, modern, and professional aesthetic for your HTML backgrounds.

In CSS, gradients are not treated as colors but as a special type of <image>. Because of this, you apply them using the background-image property (or the background shorthand).

Linear Gradients

The linear-gradient() function creates a transition along a straight line. You can control the direction and add as many color stops as you like.

The syntax for a basic linear gradient goes like this:

The [direction or angle] part is optional. It means you can specify the direction of the gradient (either using direction keywords or an angle).

In particular, the [direction or angle] part can be:

• Direction: Expressed as to top, to bottom, to right, to left, or even diagonals like to bottom right.
• Angle: For more precision, use values like 45deg, 135deg, or 90deg.
• zero: This is the default value and means the gradient will start from the top of the element.

If not specified, the default direction is to bottom (the gradient runs from top to bottom).

The color1, color2, ... part means you can add as many colors as you like. The colors will be evenly distributed along the gradient line by default. You can also specify where each color should start and stop by adding a percentage or pixel value after the color name (e.g., linear-gradient(to right, red 10%, blue 90%)). This gives you complete control over the "spread" of the gradient.

Here are examples of directional and angled linear gradients:

Radial Gradients

The radial-gradient() function creates a transition that radiates from a central point (the "shape" or origin) outwards.

You can define the shape (circle or ellipse), the starting position (using at [position]), and the color distribution:

Conic Gradients

The conic-gradient() function creates a gradient where the colors rotate around the center point (like a pie chart or a color wheel). This is often used for creating charts, dials, and artistic effects:

Color Stops

By default, colors are evenly distributed along the gradient line. However, you can use color stops to specify exactly where each color should start and stop. This gives you complete control over the "spread" of the gradient and allows you to create sharp or subtle transitions.

You can specify a color stop using <percentage> or <length> values after the color name (e.g., red 10%, blue 50px):