CSS Gradient Generator
Build linear or radial CSS gradients with live preview and one-click copy.
Gradient type
Direction
Color stops
#ff6b2b
0%
#ffd700
100%
Live preview
CSS output
CSS output
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors generated entirely by the browser — no image file required. Gradients are infinitely scalable, adapt to any element size, and add visual depth without adding HTTP requests. They are the standard way to create backgrounds, button fills, progress bars, dividers, and decorative elements in modern web design.
Linear vs radial gradients
- Linear gradient — colors transition along a straight line defined by an angle or direction keyword (
to right,45deg, etc.). Use for background fills, banners, and side-to-side color transitions. - Radial gradient — colors radiate outward from a center point in a circular or elliptical shape. Use for spotlight effects, circular buttons, and radial glow effects.
Color stops explained
A color stop defines a specific color at a specific position along the gradient axis (0% = start, 100% = end). You can have as many stops as you need. Stops don't have to be evenly spaced — placing two stops close together creates a sharp edge rather than a smooth transition, which is useful for striped or flag-style designs.
CSS gradient syntax reference
| Type | Example |
|---|---|
| Left to right | linear-gradient(to right, #ff6b2b, #ffd700) |
| Diagonal | linear-gradient(45deg, #ff6b2b 0%, #ffd700 100%) |
| Three stops | linear-gradient(to right, red, yellow, green) |
| Hard stop | linear-gradient(to right, red 50%, blue 50%) |
| Radial circle | radial-gradient(circle at center, #ff6b2b, #ffd700) |
Browser support
CSS gradients are supported in all modern browsers without vendor prefixes. The -webkit- prefix was required until around 2013 — modern projects do not need it.