Relic
Get Relic free

CSS Gradient Generator

Design a linear or radial CSS gradient with as many color stops as you like, preview it live, and copy the code.

Runs entirely in your browser. Nothing you type is uploaded.
Type
Angle90deg
Color stops
%
%
CSS
background: linear-gradient(90deg, #b5832a 0%, #1f1300 100%);

Build a gradient by eye, copy the exact CSS

Choose linear or radial, set the angle, and add as many color stops as you need. Each stop has its own color and position, so you can dial in a smooth two-color fade or a richer multi-stop blend. The preview updates live as you drag, and the output is a ready-to-paste background declaration you can drop straight into your stylesheet. Everything runs in your browser, so you can experiment freely without anything leaving your machine.

For the gradients you nail once and want back later

That hero background you spent an afternoon tuning, the brand fade you reuse across projects, the exact stops a designer approved. You copy the CSS and then it disappears into a file somewhere. Relic is an encrypted, permanent memory for everything you copy, searchable on every device and end-to-end encrypted so only you can read it. Design the gradient here for free, and keep the snippet for good.

Frequently asked questions

How do I make a CSS gradient?

Choose linear or radial, set the angle for a linear one, then add color stops with their own colors and positions. The preview updates live and the output is a ready-to-paste background declaration you can drop straight into your stylesheet.

What is the difference between a linear and a radial gradient?

A linear gradient blends colors along a straight line at the angle you set, like a horizon fading top to bottom. A radial gradient blends outward in a circle from the center, like a spotlight. This tool builds both.

How many color stops can I add?

As many as you like. Two stops give a simple fade, and adding more lets you build a richer multi-color blend. Each stop has its own hex color and a position from 0 to 100 percent, so you control exactly where each color sits.

What does the angle in a linear gradient mean?

The angle sets the direction of the blend. 0 degrees runs bottom to top, 90 degrees runs left to right, and 180 degrees runs top to bottom. Slide the control and watch the preview to find the direction you want.

Is the gradient generated on a server?

No. The preview and the CSS are built entirely in your browser, so you can experiment as much as you like and nothing leaves your machine.

More free tools
JSON Formatter
json formatter
Base64 Encode / Decode
base64 decode
Diff Checker
diff checker
URL Encode / Decode
url decoder
UUID Generator
uuid generator
Epoch Converter
epoch converter
All tools