What is the CSS Gradient Generator?
Build linear, radial, and conic CSS gradients visually with multi-stop colour control and a live preview. Copy the code straight into your stylesheet.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Gradient Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Choose your gradient type
Select Linear, Radial, or Conic from the type tabs. The preview and available controls update immediately.
Set colours and stop positions
Click any colour stop on the gradient bar to open the picker. Drag stops to reposition. Add up to 10 stops with the Add Stop button.
Copy the CSS output
The gradient() function updates in real time. Click Copy CSS and paste directly as a background value.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
.hero {
background: linear-gradient(135deg, #6C2EF5 0%, #f97316 100%);
}
/* Radial example */
.card {
background: radial-gradient(circle at 30% 50%, #6C2EF5 0%, #1e1b4b 80%);
}
/* Multi-stop */
.banner {
background: linear-gradient(
90deg,
#6C2EF5 0%,
#8b5cf6 40%,
#f97316 100%
);
}Paste as the background or background-image value on any element. No prefixes needed for Chrome 26+, Firefox 16+, Safari 7+.
Ready-to-use CSS patterns
Drop any of these straight into your project — no modifications needed.
Subtle hero background
Soft diagonal fade — works on any section background without competing with text.
.hero {
background: linear-gradient(135deg, #f8f9fa 0%, #e9d5ff 100%);
}Keep contrast low when text sits on the gradient.
Vibrant CTA button
High-energy purple-to-orange — use for primary action buttons only.
.btn-primary {
background: linear-gradient(90deg, #6C2EF5, #f97316);
color: #fff;
border: none;
}Test text contrast on both ends of the gradient.
Dark mode card
Deep radial glow for cards on dark backgrounds.
.card-dark {
background: radial-gradient(
ellipse at top,
#1e1b4b 0%,
#0f0f1a 70%
);
}Combine with a subtle border for depth.
Gradient text fill
Apply a gradient directly to text using background-clip.
.heading-gradient {
background: linear-gradient(90deg, #6C2EF5, #f97316);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}Supported in Chrome 4+, Firefox 3.6+, Safari 3+.
Pro tips for better results
Transparent stops need rgba, not hex
Use rgba(108,46,245,0) not #6C2EF500. Some browsers render the hex transparent form with a grey fringe at the fade edge.
Limit to 3-4 colour stops
Gradients with five or more stops usually look indecisive. If you need complex colour, consider a CSS pattern background instead.
Test on both light and dark page backgrounds
A gradient that looks perfect on white can disappear in dark mode. Use CSS custom properties to flip gradient values with a data-theme attribute.
Gradients cannot be transitioned directly
background-image: linear-gradient() is not animatable with CSS transition. Animate background-position on an oversized gradient, or transition opacity between layered pseudo-elements.
When to use a solid colour instead
If body copy sits on the gradient, keep the lightness difference below 10% or switch to a solid. High-contrast gradients behind text hurt readability on small screens.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.