Can I add more than two color stops?
Yes. Click 'Add Color Stop' to add as many stops as you need. Each stop has its own color and position percentage.
CSS Gradient Generator Free - Linear & Radial
Free online CSS gradient generator for linear and radial gradients. Add color stops, set angle, preview live, and copy ready-to-use CSS code instantly.
If this tool isn’t working as expected, please take a screenshot of the error and report the problem here so we can investigate and improve it.
About this tool
CSS gradient syntax - especially with multiple color stops and degree values - is non-obvious to write correctly from memory. A visual builder lets you design the gradient you want and get working code in seconds rather than iterating manually.
Build linear and radial CSS gradients visually - pick colors, set direction, add color stops, and copy the ready-to-paste background CSS property. No memorizing gradient syntax.
How to Use CSS Gradient Generator
Choose Colors
Pick colors for each stop using the color picker.
Set Position & Angle
Adjust stop positions and gradient angle or direction.
Live Preview
See the gradient update in real time as you make changes.
Copy CSS
Click copy to get the ready-to-use CSS background code.
Common Workflows
Hero Section Backgrounds
Generate gradient backgrounds for landing page hero sections.
Button Hover Gradients
Create button hover gradients for UI components.
Progress Bar Fills
Build gradient progress bar fills.
Gradient Text Effects
Design gradient text effects in CSS.
Card & Modal Backgrounds
Create subtle background gradients for cards and modals.
Image Overlays
Generate gradient overlays for images.
Best For
- Supports linear (directional) and radial (center-outward) gradient types.
- Add multiple color stops with slider-based positioning - preview updates live.
- Copies the complete CSS background property with the gradient function ready to paste.
Examples
Copy a linear gradient's CSS
Configuration
Type: Linear · Angle: 135° · Stops: #10b981 at 0%, #3b82f6 at 100%CSS Output
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);The Copy button copies exactly this line - a single background declaration using the CSS shorthand property, ready to paste into a stylesheet or inline style.
Copy a three-stop radial gradient's CSS
Configuration
Type: Radial · Stops: #f59e0b at 0%, #ef4444 at 50%, #7c3aed at 100%CSS Output
background: radial-gradient(circle, #f59e0b 0%, #ef4444 50%, #7c3aed 100%);Radial gradients always use the circle shape at the default center position - there's no shape or position control, unlike the angle slider available for linear gradients.
Turn the copied gradient into gradient text
Copied CSS
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);Gradient Text CSS
background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;The tool doesn't generate the background-clip or color declarations - add these three lines yourself after pasting the copied gradient to clip it to text instead of a box background.
Use Cases
Designing a hero section or CTA background
Build a directional linear gradient for a landing page's hero area or call-to-action band, then copy the CSS straight into your stylesheet.
Adding a gradient overlay over a background image
Copy the gradient function and combine it with an image URL as a second background layer, so text stays readable over a photo - for example, background: linear-gradient(...), url("photo.jpg");.
Styling gradient text for headings
Copy the gradient, then add background-clip: text and color: transparent yourself to clip it to a heading or logo instead of a box background.
Pairing a gradient with the Animated Button Generator
Build a gradient here, then reuse the same color values in the Animated Button Generator's gradient variant to keep the button's colors consistent with the rest of the page.
Common Mistakes
Problem
Expecting the radial gradient's center to be repositionable
Solution
This tool's radial gradients always use the circle shape at the default center position - there's no shape or position control. An off-center or elliptical radial gradient needs the copied CSS edited by hand.
Problem
Trying to remove a color stop below two
Solution
The delete icon next to a stop is disabled once only two stops remain - a gradient needs at least two color stops to exist, so the tool won't let you go lower.
Problem
Assuming the color picker supports transparency
Solution
Each stop uses a standard hex color picker, which only accepts fully opaque colors - there's no alpha/RGBA control, so semi-transparent stops (like for the overlay technique) need the hex values edited to rgba() by hand after copying.
Problem
Pasting the copied CSS into a rule that also sets background-color or background-image separately
Solution
The tool copies the background shorthand property, which resets other background sub-properties on the same selector. If your CSS also declares background-color or background-image elsewhere on that selector, check for conflicts after pasting.
Tips & Best Practices
Add the image URL as a second background layer for an overlay
The Copy button only copies the gradient itself. To lay it over a photo, combine them as two comma-separated values: background: linear-gradient(...), url("photo.jpg"); - the gradient renders on top since it's listed first.
Check contrast at both ends of the gradient before adding text
The tool doesn't check color contrast. If you're placing text over the gradient, or clipping it to text, verify readability against the lightest and darkest points of your color stops, not just the average.
Match colors with the Animated Button Generator for a consistent palette
Reuse the same hex values in both tools so your buttons and backgrounds share a color language, since neither tool imports colors from the other automatically.
Limitations
No conic or repeating gradients
Only linear-gradient and radial-gradient are supported - there's no conic-gradient, repeating-linear-gradient, or repeating-radial-gradient option.
Radial gradients have no shape or position control
Radial output is always circle at the default center position - there's no ellipse option and no way to move the center point from within the tool.
Colors are opaque hex only
The color picker for each stop only accepts solid hex colors - there's no alpha, RGBA, or HSL input, so transparent color stops require manually editing the copied CSS.
No presets, gallery, or alternate export format
Every gradient is built from scratch with manual color stops - there's no preset library to start from, and the only output is raw CSS (no Tailwind classes or other framework-specific format).
Comparisons
Linear vs Radial Gradients
Both gradient types are built the same way - pick colors and stop positions - but they differ in how much control you have over direction and shape.
| Linear | Radial | |
|---|---|---|
| Direction control | Adjustable angle from 0-360° via a slider | No angle or position control - always centered |
| Shape | A straight-line color transition across the element | Always a circle - no ellipse option |
| Best for | Directional backgrounds, hero sections, button hovers | Spotlight or glow effects, circular badges, radial highlights |
Which should you use?
Reach for linear when you need to control the direction of the transition; reach for radial when you want a centered glow or spotlight effect - just know the shape and position aren't adjustable here, only the colors and their stops.
FAQs
The most common question is about adding a gradient overlay to an image. CSS can stack a gradient on top of an image using multiple background values: background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('image.jpg');
How do I copy the generated CSS gradient?
Click the Copy button next to the CSS code output and paste it directly into your stylesheet.
Does this support radial gradients?
Yes. Switch between linear and radial gradient types using the dropdown selector.
Get more tools like this
Leave your email so we can prioritize similar tools and updates.
Trending Tools
Trending tools will appear as visitors explore the catalog.
Recently Used
Your recently visited tools will show up here.