--- title: CSS Gradient Generator: Free Online Tool | Relic description: Free CSS gradient generator. Pick colors and an angle, preview the gradient live, and copy the ready-to-use CSS. Runs entirely in your browser. canonical: https://relic.space/tools/css-gradient-generator source: https://relic.space/llms.txt --- # 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. You just copied that. What if you never lost it? **Relic** remembers everything you copy, forever, searchable on every device, and end-to-end encrypted so only you can read it. 250 MB free [Download forWindows](https://relic.space/download/windows)[Download formacOS](https://relic.space/download/macos)[Download forLinux](https://relic.space/download/linux)[Download forAndroid](https://play.google.com/store/apps/details?id=relic.space.app&referrer=utm%5Fsource%3Drelic.space%26utm%5Fmedium%3Dwebsite%26utm%5Fcampaign%3Dcontent)[Download foriPhone](https://apps.apple.com/us/app/relic-clipboard-vault/id6800556025) More free tools [JSON Formatterjson formatter](https://relic.space/tools/json-formatter)[Base64 Encode / Decodebase64 decode](https://relic.space/tools/base64)[Diff Checkerdiff checker](https://relic.space/tools/diff-checker)[URL Encode / Decodeurl decoder](https://relic.space/tools/url-encode-decode)[UUID Generatoruuid generator](https://relic.space/tools/uuid-generator)[Epoch Converterepoch converter](https://relic.space/tools/epoch-converter)[All tools](https://relic.space/tools)