CSS Gradient Generator
Create CSS gradients visually and copy the code. Pick two colors, choose linear or radial, set the angle, and get ready-to-use CSS. Free online gradient maker.
Updated 2026-06-14 · Free · No sign-up · Runs privately in your browser
Build a CSS Gradient Visually
The CSS gradient generator lets you design a gradient by eye and copy ready-to-use CSS. Pick two colors, choose linear or radial, set the angle, and grab the code — no syntax to memorize.
How to Use It
- Choose Color 1 and Color 2 with the swatches.
- Pick a type: Linear or Radial.
- For linear, drag the angle slider to aim the gradient.
- Tap Random for a surprise combo or Swap colors to reverse it.
- Tap the CSS box to copy the code.
Understanding the Output
The tool generates standard CSS like:
background: linear-gradient(90deg, #7C3AED, #EC4899);Paste it into the background property of any element — a div, header, button or section — and it renders in every modern browser.
Linear vs Radial
| Type | How it blends | Example use |
|---|---|---|
| Linear | Along a straight line at an angle | Hero sections, buttons, banners |
| Radial | Outward in a circle from the center | Spotlights, glows, cards |
Angle Quick Reference
| Angle | Direction |
|---|---|
| 0deg | Bottom to top |
| 90deg | Left to right |
| 180deg | Top to bottom |
| 45deg | Bottom-left to top-right |
Tips for Great Gradients
- Keep hues close for a smooth, subtle blend; contrast them for a bold, energetic look.
- Use a 45deg or 135deg angle for a natural, dynamic feel on hero backgrounds.
- Radial gradients work beautifully behind centered content to draw the eye inward.
- Hit Random a few times to discover combinations you would not have picked by hand.
Everything updates live in your browser, so you can experiment freely and copy the exact CSS the moment a gradient looks right. It is the fastest way to go from idea to working background code.
Frequently asked questions
How do I create a CSS gradient?+
Pick two colors, choose linear or radial, and set the angle for linear gradients. The tool shows a live preview and generates the CSS, such as background: linear-gradient(90deg, #7C3AED, #EC4899); which you can copy with one tap.
What is the difference between linear and radial gradients?+
A linear gradient blends colors along a straight line at a chosen angle, while a radial gradient blends them outward in a circle from the center. Both are supported here with a live preview.
How does the gradient angle work?+
The angle sets the direction of a linear gradient in degrees. 0 degrees goes bottom to top, 90 degrees goes left to right, and 180 degrees goes top to bottom. Drag the slider to see the direction change live.
How do I use the generated CSS?+
Copy the generated line and paste it into the background property of any element in your stylesheet, for example a div, header or button. The gradient will render in all modern browsers.
Can I generate a random gradient?+
Yes. Tap Random to get two random colors and a random angle instantly, or use Swap colors to reverse the gradient direction. It is a fast way to find a combination you like.