CSS Gradient Generator
Create linear and radial CSS gradients visually. Add color stops, pick your output format, and copy the code instantly.
What is a CSS Gradient?
A CSS gradient creates a smooth transition between two or more colors directly in the browser, with no image file needed. Gradients are defined as a value for background-image (or the background shorthand) and come in three main types: linear, radial, and conic. This generator covers linear and radial, the two most commonly used types for backgrounds, buttons, cards, and banners.
Because gradients are rendered by the browser rather than downloaded as an image, they add zero extra HTTP requests and scale perfectly at any resolution, including high-DPI screens.
Linear Gradient Syntax
background: linear-gradient(angle, color1 pos1, color2 pos2, ...);
- angle — Direction of the gradient line, in degrees. 0deg points up, 90deg points right, 180deg points down.
- color stops — Two or more colors, each with an optional position percentage controlling where it sits along the gradient line.
Radial Gradient Syntax
background: radial-gradient(circle at x y, color1 pos1, color2 pos2, ...);
- shape — Usually
circleorellipse(the default). - position — Where the gradient center sits, using keywords or percentages for x and y.
- color stops — Same as linear gradients, spreading outward from the center instead of along a line.
Common Gradient Examples
Subtle UI Background
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ee 100%);
Vibrant Button Gradient
background: linear-gradient(90deg, #7c6af7 0%, #38bdf8 100%);
Radial Spotlight Effect
background: radial-gradient(circle at 50% 30%, #ffffff 0%, #1a1d27 100%);
Three-Stop Sunset
background: linear-gradient(180deg, #ff7e5f 0%, #feb47b 50%, #fff1c1 100%);
When to Use Each Gradient Type
- Linear gradients — Buttons, banners, page backgrounds, and any element where direction matters, such as a top-to-bottom fade.
- Radial gradients — Spotlight or glow effects, badges, circular UI elements, and backgrounds that should draw the eye to a center point.
- Multi-stop gradients — Sunset or aurora-style effects that need more than two colors to look natural.
Why Use OKLCH for Gradients
HEX and RGB gradients interpolate in a color space that does not match how the human eye perceives brightness, so gradients between very different hues (like blue to yellow) can pass through a dull, muddy gray in the middle. OKLCH is a perceptually uniform color space, meaning a gradient built in OKLCH keeps consistent brightness and saturation across every stop. Browser support for oklch() is strong in current versions of Chrome, Firefox, Safari, and Edge, but always check your target browsers before relying on it for production.
How to Use This Generator
- Choose Linear or Radial gradient type
- Adjust the Angle (linear) or Center X/Y (radial) controls
- Add or remove Color Stops and set each one's color and position
- Switch the Preview tab to see the gradient on a box, button, card, or hero banner
- Pick your preferred Output Format: HEX, RGB, HSL, or OKLCH
- Click Copy CSS to copy the code, or Copy Shareable Link to save and share the exact gradient
Frequently Asked Questions
How do I create a multi-color CSS gradient?
Add as many color stops as you need using the Add Color Stop button, then set a position percentage for each one. The browser blends smoothly between every stop in the order you place them.
What is the difference between linear and radial gradients?
A linear gradient moves color in a straight line at a chosen angle. A radial gradient spreads color outward from a center point in a circular or elliptical shape.
Why use OKLCH instead of HEX or RGB for gradients?
OKLCH interpolates colors more evenly to the human eye, which avoids the dull or muddy middle tones that HEX and RGB gradients sometimes produce, especially between very different hues.
Can I share a gradient I created with this tool?
Yes. Click Copy Link to copy a URL with your gradient saved in it. Opening that link loads the exact same gradient, with no account or login required.
Does a CSS gradient slow down page load?
No. CSS gradients are rendered directly by the browser with no image file to download, so they typically load faster than a background image and require no extra HTTP request.