Backgrounds & Gradients

Add depth, lighting, and vibrant patterns to elements using pure CSS gradients.

CSS6 min readConcept 14 of 43

What it is

While background-color fills an element with a single flat color, CSS gradients allow you to smoothly transition between two or more colors.

Because gradients are drawn by the browser's graphics engine, they are infinitely scalable and look perfectly crisp on high-resolution Retina displays.

Why it matters

Modern web design relies heavily on gradients to create realistic lighting, premium metallic effects, or vibrant brand backgrounds.

If you had to use JPG or PNG images for these effects, your website would load slower, and the graphics would become blurry when resized. CSS gradients solve this by being mathematically generated instantly.

How it works

In CSS, a gradient is actually considered an image. Therefore, you must apply it using the background-image (or shorthand background) property, never background-color.

CSS provides three main types of gradients:

1. **Linear**: Transitions along a straight line (linear-gradient(90deg, red, blue)).

2. **Radial**: Transitions outward from a central point, forming a circle or ellipse (radial-gradient(circle, red, blue)).

3. **Conic**: Sweeps colors around a central point, like a radar sweep or color wheel (conic-gradient(red, blue)).

Try it

Toggle between linear, radial, and conic gradient modes, and adjust the color stops to see how the math engine draws the transitions.

Gradient Generator

Gradient Type

Color 1 (Cyan) Stop

0%

Color 2 (Fuchsia) Stop

100%
.gradient-box {
background-image:
linear-gradient(135deg,
#06b6d4 0%,
#d946ef 100%
);
}
Notice how the browser smoothly interpolates the colors between the two stops. If you set both stops to the exact same percentage, you create a sharp "hard stop" instead of a smooth fade!

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which CSS property must you use to apply a gradient?
  2. 2Which type of gradient sweeps colors around a central axis, often used to create pie charts or color wheels?
  3. 3What happens if you provide three colors to a gradient but do not specify their positions (e.g., linear-gradient(red, green, blue))?

Remember this

  • Gradients are applied using background-image.
  • Linear gradients follow a straight line.
  • Radial gradients expand outward from a center point.
  • Conic gradients rotate around a center axis.
  • You can layer multiple gradients together by separating them with commas.

Done with this concept?

Mark it complete to track your progress. No login needed.