CSS Gradient Generator
Create beautiful CSS gradients with a visual builder. Choose colours, positions, angles, and gradient type. Copy the CSS with vendor prefixes.
Gradient Preview
Quick Presets
Type
Colour Stops (2)
CSS Output
Standard CSS
background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%);
With Vendor Prefixes
background: -webkit-linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%); background: -moz-linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%); background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%);
Linear, Radial, and Conic in Plain English
Linear gradients fade from one colour to another along a straight line at a given angle. The default is 90deg, which fades left-to-right. Set 0deg for bottom-to-top, 180deg for top-to-bottom, or any angle in between. Radial gradients fade outwards from a centre point in concentric circles or ellipses, useful for spotlight effects and soft vignettes. Conic gradients sweep around a centre like a clock hand and are how people build pure-CSS pie charts and colour wheels.
The tool starts with a two-stop linear gradient from coral (#ff6b6b) to teal (#4ecdc4) at 90deg. Drag stops along the bar to reposition them, double-click any stop to change its colour, or click the empty bar to add a new stop. Three or more stops let you build the smooth multicolour blends that have replaced flat colour as the default for hero sections in 2026.
Why Stops Matter More Than Colours
Two well-placed stops with mid-saturation colours look more polished than five clashing rainbow stops. The Sunset preset (#ff6b6b to #feca57 at 50% to #ff9ff3) demonstrates the rule: warm tones, similar luminance, and a gentle hue shift across roughly 80 degrees on the colour wheel. Adjacent stops at the same position create a hard line, useful for stripes; stops far apart create a soft fade.
Colour space matters too. The default `linear-gradient` interpolates in sRGB, which can produce muddy mid-tones when the start and end colours sit on opposite sides of the wheel. Modern browsers also support `linear-gradient(in oklch, ...)` which interpolates in a perceptually uniform colour space and avoids the grey muddy zone. The tool outputs sRGB syntax for compatibility, but you can prefix the type with `in oklch` manually if your audience is on Chrome 111+ or Safari 16.4+.
Useful Angles for Linear Gradients
| Angle | Direction | Common Use |
|---|---|---|
| 0deg | Bottom to top | Sky-to-ground hero backgrounds |
| 45deg | Bottom-left to top-right | Dynamic, energetic feel |
| 90deg | Left to right | Default, reads naturally |
| 135deg | Top-left to bottom-right | Subtle depth on cards |
| 180deg | Top to bottom | Header overlays, fade-to-dark |
| to bottom right | Diagonal, viewport-aware | Adapts when box is non-square |
Frequently Asked Questions
What is the difference between deg and the 'to' keyword?
Both work, but they're not interchangeable on non-square boxes. '90deg' fixes the gradient line at exactly 90 degrees clockwise from north. 'to right' adapts to the box's aspect ratio so the gradient travels truly corner-to-corner on rectangles. For square hero sections the difference is invisible, but on a 16:9 banner '45deg' and 'to top right' give visibly different results.
Do I still need vendor prefixes?
No. The unprefixed `linear-gradient`, `radial-gradient`, and `conic-gradient` syntaxes have been universally supported since Chrome 26, Firefox 16, and Safari 6.1. The only real-world reason to keep -webkit- prefixes is HTML email rendering, where some clients still need them. For the open web, ship the unprefixed version.
How do I make a gradient text effect?
Set background-image to your gradient, then add background-clip: text and color: transparent (with -webkit-background-clip: text for Safari). The text becomes a window onto the gradient. This works best with bold weights and large sizes; thin fonts at body size lose definition because the visible glyph area is too small to show the colour fade.
Can I animate a gradient?
Not directly: CSS can't transition the gradient itself because each stop is a separate value. The trick is to set the gradient's background-size larger than the element (e.g. 200% 200%) and animate background-position. This shifts the visible portion of a fixed gradient and looks like the gradient is morphing. The newer @property API allows custom property interpolation for true gradient animation in Chrome and Edge.
Related Tools
CSS Box Shadow Generator
Build CSS box shadows visually with live preview. Adjust offset, blur, spread, colour, and opacity. Stack multiple layers and copy the CSS.
Colour Palette Generator
Generate beautiful colour palettes instantly. Choose from random, monochromatic, analogous, complementary, triadic, pastel, and more. Lock colours, copy hex codes, download as PNG.
Colour Contrast Checker
Check if your text and background colours meet WCAG accessibility standards (AA & AAA). Auto-fix suggestions included