CSS Gradient Generator
Generate CSS gradients visually. Pick colours, adjust angle, and copy the CSS code.
Generate CSS linear or radial gradients with live preview. Copy the CSS directly into your stylesheet or design system.
Choose two colours, set the angle for linear gradients, then copy a valid background declaration. Add extra colour stops in your stylesheet when you need tighter control.
CSS Code
background: linear-gradient(135deg, #6366f1, #ec4899);
CSS Gradients: A Complete Guide
Gradients are one of the most underused tools in a developer's CSS toolkit. They create smooth colour transitions without images, meaning zero extra HTTP requests, infinite scalability, and tiny file sizes. A gradient that would be a 50KB PNG is just one line of CSS.
CSS supports three types: linear (straight lines), radial (circular/elliptical), and conic (angular, like a pie chart). Linear gradients cover 90% of real-world use cases, hero backgrounds, buttons, overlays, and decorative elements.
This generator gives you a visual preview with adjustable colours and angles for linear and radial gradients. Copy the CSS and paste it directly into your stylesheet. Linear and radial gradients work in all current browsers without prefixes.
Gradient Types Compared
| Type | Syntax | Best For |
|---|---|---|
| Linear | linear-gradient(to right, #000, #fff) | Backgrounds, buttons, overlays, hero sections |
| Radial | radial-gradient(circle, #000, #fff) | Spotlights, glows, vignette effects |
| Conic | conic-gradient(from 0deg, #000, #fff) | Pie charts, colour wheels, progress rings |
| Repeating linear | repeating-linear-gradient(45deg, ...) | Stripes, diagonal patterns, progress bars |
Gradient Tips for Developers
Avoid the grey zone
Gradients between complementary colours (e.g., blue→orange) pass through muddy grey. Add a mid-point colour to keep the transition vibrant. Blue→purple→orange looks far better than blue→orange.
Use gradients for text overlays
A subtle gradient from transparent to rgba(0,0,0,0.7) makes white text readable over any image. Much more elegant than a solid dark overlay.
Layer multiple gradients
CSS supports stacking gradients with commas. Combine a radial spotlight with a linear tint for depth: background: radial-gradient(...), linear-gradient(...).
Performance is excellent
CSS gradients are rendered by the GPU with near-zero performance cost. They're faster than images and scale perfectly to any resolution, including Retina displays.
Popular Gradient Presets
Starting from scratch is hard. These proven combinations work well for common UI elements:
| Name | CSS | Use Case |
|---|---|---|
| Sunset | linear-gradient(135deg, #f093fb, #f5576c) | Hero backgrounds, CTAs |
| Ocean | linear-gradient(135deg, #667eea, #764ba2) | SaaS landing pages, cards |
| Mint | linear-gradient(135deg, #11998e, #38ef7d) | Success states, eco themes |
| Midnight | linear-gradient(135deg, #0c0c1d, #1a1a3e) | Dark mode backgrounds |
| Glass | linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0)) | Glassmorphism overlays |
| Text fade | linear-gradient(to bottom, transparent, var(--bg)) | "Read more" content cutoff |
135deg is the most popular gradient angle in modern design, it goes from top-left to bottom-right, which feels natural because we read in that direction.
Copyable Worked Example
A good gradient usually needs more than two colours when the endpoints are far apart. Adding a middle colour gives the browser a better route through colour space and avoids a flat, grey-looking centre.
.hero-panel {
background:
linear-gradient(
135deg,
#0f172a 0%,
#2563eb 48%,
#ec4899 100%
);
color: #ffffff;
}Angle
135deg sends the transition diagonally. In CSS, 90deg runs left to right.
Stops
0%, 48%, and 100% set where each colour sits along the gradient line.
Contrast
White text can work on this dark example. If the gradient includes pale colours, add a darker overlay or choose a text colour with enough contrast.
How Colour Stops Work
A colour stop is a colour plus an optional position. If you omit positions, the browser spaces the colours evenly. If two adjacent stops share the same position, the gradient creates a hard edge instead of a smooth blend.
| Goal | Valid CSS | What happens |
|---|---|---|
| Smooth two-colour blend | linear-gradient(90deg, red, blue) | Browser spaces red at 0% and blue at 100% |
| Controlled midpoint | linear-gradient(90deg, red 0%, purple 50%, blue 100%) | Purple appears at the centre of the line |
| Hard split | linear-gradient(90deg, red 50%, blue 50%) | Red stops and blue starts at the same point |
| Repeating stripes | repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) | The same stop pattern repeats across the element |
Browser Support and Fallbacks
Linear and radial gradients are safe in current Chrome, Safari, Firefox, and Edge. Conic gradients are also supported in current browsers, but older projects sometimes avoid them if they still support older enterprise browsers.
A CSS gradient is treated as an image value, so it usually belongs in background or background-image. If you need a fallback solid colour, put it before the gradient declaration.
Gradients can use custom properties for theme colours. For example, a design system can set --brand-start and --brand-end, then reuse the same gradient structure across light and dark themes.
If a custom property is missing, the whole gradient value can fail. Add fallback values inside var() when the colour token may not exist on every page.
.banner {
background-color: #2563eb;
background-image: linear-gradient(135deg, #2563eb, #ec4899);
}Common Gradient Mistakes
Forgetting that gradients are images
Use background or background-image, not background-color, for the gradient itself.
Putting text on low contrast areas
A gradient can be dark on one side and pale on the other. Check contrast across the whole text area, not just at the start of the gradient.
Using the wrong angle mental model
In CSS, 0deg points upward and 90deg points right. Keywords such as to right can be easier to read.
Expecting smooth animation by default
Browsers do not normally interpolate between two full gradient strings. Animate background-position, opacity, or registered custom properties instead.
Skipping a fallback colour
A fallback colour is still useful for print styles, old embedded browsers, and quick visual debugging when a custom property is missing.
Overusing decorative gradients
Keep gradients purposeful: hierarchy, depth, overlays, state, or brand colour. Too many competing gradients make a utility interface harder to scan.
Related Tools
CSS Box Shadow Generator
Create custom box shadows visually
CSS Border Radius Generator
Design rounded corners with preview
Colour Converter
Convert between HEX, RGB, HSL
Colour Palette Generator
Generate harmonious colour schemes
CSS Minifier
Minify CSS for production
CSS Beautifier
Format CSS for readability
How to use this tool
Choose linear or radial gradient type
Pick two colours using the colour pickers or enter hex codes
Adjust the angle with the slider (linear) and copy the CSS
Common uses
- Creating hero section backgrounds
- Styling buttons and cards with colour transitions
- Adding overlay effects on images
- Designing decorative UI elements
- Building colour-based loading indicators
Share this tool
Frequently Asked Questions
What is a CSS gradient?
What types of gradients does CSS support?
Can I use gradients on text?
How do I avoid the muddy grey in gradients?
Do CSS gradients work in all browsers?
Can I layer multiple gradients?
How do gradient stops work?
What angle values can I use?
Are CSS gradients performant?
How do I create a gradient border?
Can I animate CSS gradients?
What's the difference between linear and radial gradients?
Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.