CSS Linear Gradient Guide: Syntax, Angles, Colors, and Readability

CSS gradients let the browser generate smooth transitions between colors without loading a background image.

A simple linear gradient can create depth, brand accents, hero backgrounds, button surfaces, and subtle overlays.

Duck Cloud's CSS Gradient Generator creates and previews two-color linear gradients locally in your browser.

Basic syntax

A simple gradient looks like:

background: linear-gradient(90deg, #ff8800, #ffcc66);

The browser transitions from the first color to the second according to the specified direction.

Gradient direction

Directions can be expressed with angles or directional keywords.

Common angles include:

0deg
45deg
90deg
180deg

The exact visual direction follows CSS gradient rules, so preview the result rather than assuming angle behavior from graphics software.

The CSS Gradient Generator is useful for experimenting visually and copying the resulting CSS.

Color stops

Gradients can include positions:

linear-gradient(
  90deg,
  #ff8800 0%,
  #ffcc66 100%
)

More advanced gradients can include multiple stops, but more stops do not automatically improve the design.

For many interfaces, two intentional colors are easier to maintain.

Use gradients as design accents

A gradient is strongest when it supports hierarchy rather than becoming the entire visual identity.

Good uses include:

• hero accents;
• highlighted cards;
• subtle backgrounds;
• decorative borders;
• call-to-action areas.

Too many unrelated gradients can make a product look inconsistent.

Text over gradients

Text contrast can change across the gradient.

White text might pass contrast requirements over the dark side and fail over the light side.

Solutions include:

• darkening the entire gradient;
• adding a consistent overlay;
• placing text inside a solid surface;
• restricting the gradient region;
• changing the foreground color.

Test representative points using the Contrast Checker.

Brand colors

Use the Color Picker to capture precise values, then convert between formats with HEX to RGB or HEX to HSL when useful.

Store final gradient colors in design tokens if the effect is reused.

CSS variables

Reusable gradients can reference CSS custom properties:

:root {
  --brand-start: #ff8800;
  --brand-end: #ffcc66;
}

.hero {
  background: linear-gradient(
    90deg,
    var(--brand-start),
    var(--brand-end)
  );
}

This makes brand updates easier and keeps components consistent.

Gradients and dark mode

A gradient that looks balanced on a white site can become distracting in dark mode.

Treat dark-mode gradients as separate design decisions.

Check:

• brightness;
• text contrast;
• border visibility;
• hover states;
• adjacent surfaces.

Performance

CSS gradients are often lighter than downloading a large decorative bitmap.

However, extremely complex animated gradients can create more rendering work.

Measure performance if you animate large full-screen effects.

For static two-color gradients, the main concern is usually design quality rather than transfer size.

Avoid baking text into gradient images

Keeping text as real HTML improves:

• accessibility;
• responsiveness;
• localization;
• searchability;
• editing.

Use CSS for the background and HTML for the content.

Gradient checklist

• Start with brand-compatible colors.
• Choose one clear direction.
• Preview the CSS.
• Test text contrast across the whole area.
• Store reusable values as tokens.
• Check mobile layouts.
• Test dark mode separately.
• Avoid excessive animation.
• Keep important text as HTML.

A good gradient should feel like part of the system, not an effect added because CSS makes it easy.