Free CSS Gradient Generator
Design CSS gradients visually with a live preview editor. Add color stops, adjust positions, choose linear/radial/conic type, set angle or direction, and copy the generated CSS instantly. Works for backgrounds, buttons, overlays, and any element that accepts CSS background.
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);Presets
Type
Angle — 135°
Color Stops
Ready-to-use snippets
Background
.element {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}Gradient text
.gradient-text {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}Button
.btn {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
}Overlay
.overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
opacity: 0.7;
}All gradients use standard CSS — compatible with Chrome, Firefox, Safari, and Edge.
Frequently Asked Questions
What gradient types are supported?+
Linear (along a line at any angle), radial (circular/elliptical from a center point), and conic (stops around a center like a color wheel). All three generate valid CSS that works in all modern browsers.
How do I add more color stops?+
Click "Add Stop" to add a new color stop. Each stop has a color picker and a position (0–100%). You can add as many stops as needed for complex multi-color gradients.
What CSS does this generate?+
The tool generates a CSS background property, for example: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). Paste directly into your CSS rule.
Can I apply this gradient to text?+
Yes — use background-clip: text with -webkit-background-clip: text and color: transparent alongside the background property.
Do conic gradients work in all browsers?+
Conic gradients are supported in Chrome 69+, Firefox 83+, Safari 12.1+, and Edge 79+. Internet Explorer does not support any CSS gradients without a polyfill.
Check your gradient colors meet accessibility standards
Use the Color Contrast Checker to verify foreground text on gradient backgrounds meets WCAG AA requirements.
CSS Gradients: A Complete Guide
CSS gradients create smooth transitions between two or more colors without requiring image files. They render at any resolution without loss of quality, are fully animatable with CSS transitions, and add zero HTTP requests. Understanding the three gradient types lets you cover nearly every visual effect you'll ever need.
Linear gradients: the workhorse
Linear gradients transition colors along a straight line. The most important parameter is the angle: 0deg goes from bottom to top, 90deg from left to right, 180deg from top to bottom (the default), and 45deg from bottom-left to top-right. You can also use keywords: to right, to bottom right, etc. Add as many color stops as needed — complex multi-stop gradients are no different in performance than a simple two-color one. Use the Color Picker to find harmonious colors for your stops.
Radial gradients: light and depth
Radial gradients spread outward from a center point in an ellipse or circle. They are ideal for creating depth effects, spotlight highlights, and subtle background textures. The center position defaults to center but can be set to any keyword or percentage — at top left creates a glow in the corner, while at 80% 20% places it precisely. Circles maintain equal dimensions in both axes; ellipses match the container's aspect ratio by default.
Conic gradients: color wheels and pie charts
Conic gradients arrange color stops around a center point, rotating rather than spreading outward. The classic use case is a color wheel with conic-gradient(red, yellow, lime, aqua, blue, magenta, red). They are also excellent for pie charts (set sharp stop positions), loading spinners (animated with CSS rotation), and radar/starburst backgrounds. The from keyword controls the starting angle of the first stop.
Gradient text: the modern technique
Applying gradients to text requires three properties working together. First, set the gradient as a background. Then use -webkit-background-clip: text; background-clip: text; to clip the background to the text shape. Finally, make the text color transparent with color: transparent; so the background shows through. This technique works in all modern browsers. The gradient text snippet in this tool generates all three properties ready to paste.
Performance considerations
CSS gradients have negligible rendering cost compared to background images. They do not trigger layout reflows, are GPU-composited in modern browsers, and are fully resolution-independent (critical for high-DPI screens). For animated gradients, avoid animating the background property directly — instead, use a pseudo-element or wrapper and animate transform: rotate() or opacity, which stay on the compositor thread and avoid triggering paint operations.