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.
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.