CSS Gradient Generator

Build CSS gradient backgrounds visually. Pick linear, radial or conic, set the angle or centre, and drag colour stops along the bar or edit them numerically — click the bar to add a stop at that point. The preview updates instantly and the generated CSS includes a solid fallback colour.

How to use the CSS Gradient Generator

1. Choose linear, radial or conic.
2. Set the angle, shape or centre position.
3. Drag stops, click the bar to add one, or edit colours and positions below.
4. Start from a preset if you like.
5. Copy the CSS value or the full rule.

Features

• Linear, radial and conic gradients
• Draggable, keyboard-adjustable colour stops
• Add and remove stops with automatic colour interpolation
• Repeating gradients for stripes
• Presets and a solid fallback colour in the output

Benefits

• Create backgrounds without guessing CSS syntax
• See exactly how the gradient will look before using it
• Copy-ready code for any modern browser

Frequently asked questions

Do these gradients work in all browsers?

Linear and radial gradients work in every modern browser. Conic gradients are supported in all current major browsers but not in very old versions.

Why is there a background-color line in the CSS?

It is a fallback so that very old browsers, or failed image layers, still show a reasonable solid colour.

How do I make hard stripes?

Place two stops at the same position with different colours, and enable Repeating — the Stripes preset shows how.

Related tools

• QR Code Generator — Create QR codes for links, text, Wi-Fi, email, phone, SMS or contact cards, with custom colours, and download PNG or SVG.
• URL Decoder — Decode percent-encoded URLs and query strings, handle + as space, unwrap double encoding and spot malformed sequences.
• URL Encoder — Percent-encode text or URLs in component, full-URL or form mode, and break any URL into its parts and query parameters.
• HTML Entity Encoder — Escape &, <, >, quotes or every non-ASCII character as named, decimal or hex HTML entities for safe display in HTML.
• HTML Entity Decoder — Convert HTML entities like &amp;, &eacute;, &#8364; and &#x1F600; back into plain text, supporting all HTML5 named entities.
• Percentage Calculator — Work out X% of Y, what percent one number is of another, percentage change, or increase and decrease a value by a percent.