CSS Gradient Generator
Generate beautiful CSS gradients visually. Pick colours, adjust angle, and copy the CSS code.
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, angles, and stops. Copy the CSS and paste it directly into your stylesheet. Browser support is universal — gradients work in every modern browser 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.
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