CSS Gradient Generator
Build CSS gradients online with a live preview: linear, radial and conic. Copy the code for your background, free and in your browser.
What this tool does
CSS gradient generator with a live preview. Pick two colors, the gradient type (linear, radial or conic) and the angle. The CSS rule appears ready to copy.
No colors yet? Start with palette generator or run any value through color converter.
What you can use it for
- Quickly create a hero background for a landing page.
- Generate a gradient for a button or a feature card.
- Try color combinations before committing to a palette.
- Ship a gradient ready for Tailwind or a theme variable.
How to use it
- Pick the start and end colors.
- Choose the gradient type: linear, radial or conic.
- If it's linear, adjust the angle in degrees.
- Copy the CSS rule or the HTML preview that appears below.
Everything runs inside your browser. No file is uploaded to any server. See more tools in this field.
Gradient presets that actually work
If you don't know where to start, try these gradients. Each one fits a concrete use and they're combinations that have been tested in the wild.
Sunset
#F97316 → #EF4444 · 135°
Warm heros, sales CTAs.
Citrus lime
#A3E635 → #22C55E · 135°
Health products, green fintech, dashboards.
Ocean
#0EA5E9 → #1E40AF · 90°
Tech, B2B SaaS, professional backgrounds.
Lavender
#A78BFA → #EC4899 · 45°
Creative branding, beauty, crypto.
Charcoal
#1F2937 → #4B5563 · 180°
Dark mode, sober elegant backgrounds.
Mango
#FBBF24 → #F97316 · 135°
Food and beverage, playful gradients.
Pairs well with
Other tools people reach for in the same flow.
- Color Palette Generator
generate color palettes
Pick the colors for your gradient.
- Color Converter: HEX, RGB, HSL
convert colors between HEX, RGB and HSL
Pick the colors for your gradient.
- Color Contrast Checker (WCAG)
check WCAG color contrast
Once you have the base color.
- CSS Box Shadow GeneratorNew
build CSS box shadows
Once you have the base color.
- CSS Border Radius Generator
build CSS rounded corners
Once you have the base color.
Related tools
DesignColor Palette Generator
Generate harmonious color palettes from any base color: analogous, complementary and more. Free and in your browser, ready to copy.
Color Converter: HEX, RGB, HSL
Convert colors between HEX, RGB and HSL online. Paste any format and get the others instantly. Free, no upload and in your browser.
Color Contrast Checker (WCAG)
Check WCAG color contrast between text and background, with live previews, pass or fail grades and accessible color suggestions. In your browser.
CSS Box Shadow Generator
Build a CSS box-shadow with a live preview: set the offset, blur, spread, color and opacity, then copy the code. Free and in your browser.
Frequently asked questions
What's the difference between linear, radial and conic gradients?
Linear interpolates colors along a straight axis. Radial spreads color out from a central point. Conic rotates colors around a point, like the color wheels in Photoshop. Each fits a different scene.
How do I choose the angle of a linear gradient?
0 degrees goes bottom to top, 90 degrees left to right, 180 top to bottom and 270 right to left. Intermediate angles create smooth diagonals. For a modern look, 135 or 45 usually works.
Can I use the generated CSS directly?
Yes. The output is a background-image property ready to paste into your stylesheet or a custom CSS variable.
Does it work with more than two colors?
For simplicity this version uses two colors. If you need extra stops, copy the generated rule and add the extra stops manually inside the CSS rule.