CSS Gradient Generator

Overview

Build linear CSS gradients visually by picking two colors and an angle, then copy ready-to-use CSS. Great for backgrounds, buttons, and hero sections without memorizing syntax.

How to use

1. Pick the start and end colors.
2. Adjust the gradient angle while watching the live preview.
3. Copy the generated linear-gradient() CSS into your stylesheet.

Examples

• Hero background

  Input: Purple to blue at 135deg

  Output: background: linear-gradient(135deg, #8b5cf6, #3b82f6);

• Button accent

  Input: Orange to pink at 90deg

  Output: A horizontal two-stop gradient for a call-to-action button.

Notes

• This tool generates linear gradients; for radial ones write radial-gradient() manually.
• You can add more color stops by editing the generated CSS in your editor.
• Check contrast against overlaid text, especially in dark mode.

FAQ

Can I create gradients with three or more colors?

The tool outputs two-stop gradients. Add extra stops manually, e.g. linear-gradient(90deg, red, yellow, green).

What does the angle mean?

0deg points upward and angles increase clockwise: 90deg goes left-to-right, 180deg top-to-bottom.

Do gradients affect performance?

CSS gradients are rendered by the browser and are generally cheaper than image files.

Embed this tool

Paste this iframe into any HTML page to embed CSS Gradient Generator on your site: