CSS Gradient

Builds a CSS gradient from two colours and an angle, with a live preview and the linear-gradient() code ready to copy. Pick the endpoints, turn the angle, paste the result into a stylesheet.

How to use

1. Pick the two colours — background first, accent second is a good habit.
2. Set the angle: 180° runs top to bottom, 90° left to right.
3. Watch the preview until the blend looks right.
4. Copy the generated CSS into your stylesheet.

When you actually need this

• Giving a hero section or card header depth without shipping an image.
• Building button and badge backgrounds that read richer than flat colour.
• Reproducing a gradient from a design mock as actual CSS.
• Creating a subtle page background that will not distract from content.

Why some gradients look muddy

A gradient interpolates between its endpoints through RGB space, and when two vivid colours sit far apart on the colour wheel the midpoint often lands on grey — a red-to-cyan blend passes through mud. Gradients between neighbouring hues, or between two lightness levels of one hue, stay clean. CSS gradients render at any size for free — no image download, no scaling artefacts — and angles follow compass convention: 0° points up, angles grow clockwise. For text over a gradient, check contrast against the gradient's weakest point, not its average.

Related tools

FAQ

Which colour formats does CSS Gradient support?

HEX in three, six and eight digit forms, RGB and RGBA, and HSL and HSLA. Values are converted through a common internal representation, so round-tripping between formats does not drift.

What contrast ratio do I need to pass accessibility checks?

WCAG 2.1 level AA requires 4.5 to 1 for normal body text and 3 to 1 for large text, which means 18.66 pixels bold or 24 pixels regular and above. Level AAA raises those to 7 to 1 and 4.5 to 1 respectively.

Can I paste the output straight into CSS?

Yes. The generated values are valid CSS colour syntax and can be pasted into a stylesheet, a design token file or a component's inline style without any editing.