CSS Gradient Generator

CSS DESIGN DEVELOPER VISUAL

About this tool

Generate CSS gradient code visually

Build linear and radial CSS gradients visually. Up to 6 colour stops, angle picker, presets, live preview, and one-click copy. Free.

RT-DEV-050 · Developer Tools

Angle 135°

Colour stops

CSS

Presets

How to Use the Generator

Pick a type

Choose Linear for directional gradients or Radial for circular spotlights.

Adjust your colour stops

Click any stop to change its colour. Drag the position slider to reposition. Add up to 6 stops.

Set angle or shape

For linear gradients adjust the angle slider; for radial choose shape and position.

Copy the CSS

The generated code updates live. Click Copy CSS to grab it for your stylesheet.

About CSS Gradients

CSS gradients are smooth colour transitions defined entirely in code — no image files required. They were introduced in CSS3 (Webkit shipped the first implementation in 2008, the spec was standardised in CSS Image Values Level 3 in 2012) and have replaced gradient images across the web. Three native types cover essentially every gradient pattern you'd ever want: linear-gradient() for directional transitions (sunset hero backgrounds, button hovers, section dividers), radial-gradient() for circular emanations from a centre point (spotlight effects, sphere-like buttons, focal-point backgrounds), and conic-gradient() for sweep patterns rotating around a centre (donut charts, colour wheels, decorative slices).

Compared to raster image backgrounds, CSS gradients are essentially free to render. They compute on the GPU at any resolution — pixel-perfect on Retina, 4K, and 8K displays alike. They scale infinitely without losing quality. They add zero KB of network payload because they're pure CSS text. And they're far easier to tweak: change one value and your design system updates everywhere the gradient is used. The trade-off is artistic flexibility — you can't replicate complex painted gradients or photographic textures with CSS alone — but for 95% of UI gradient needs, native CSS is the right answer.

"Gradients used to be a 50 KB image asset. Now they're a one-line CSS declaration that renders pixel-perfectly at 8K resolution. The cost of a beautiful hero background dropped to zero."
— observation that captures a quiet revolution in web design

Linear, radial, and conic — when to use which

linear-gradient(angle, color1, color2) is the workhorse — directional transitions between two or more colours. Use it for hero backgrounds, button hover states, section dividers, "fade to white" image overlays, and anywhere you want a gentle directional sweep. The angle parameter accepts degrees (45deg), keywords (to bottom right), or radians; modern browsers all accept the same syntax without vendor prefixes. radial-gradient() works best for spotlight effects, sphere-shaped buttons, focal-point backgrounds (think a sunburst behind a hero image), and anywhere you want a sense of light emanating from a centre. conic-gradient() — the newest of the three, supported since 2020 in all evergreen browsers — sweeps colours around a centre point, perfect for pie charts, donut indicators, colour wheels, and tarot-card-style decorative panels. Combine all three in layers (CSS gradients stack with commas) for genuinely complex compositions.

Colour stops, easing, and the perceptual brightness trap

Multi-stop gradients let you control exactly where colour transitions happen: linear-gradient(90deg, red 0%, yellow 20%, green 50%, blue 100%). By default, browsers interpolate linearly in sRGB colour space — which produces a known visual artefact: gradients passing through grey or muddy mid-tones because sRGB isn't perceptually uniform. The fix landed in CSS Color Module Level 4: linear-gradient(in oklch, red, blue) tells the browser to interpolate in OKLCH (a perceptually uniform space), producing smoother, brighter mid-tones. As of 2024, Chrome, Safari, and Firefox all support OKLCH interpolation; this generator outputs both classic sRGB gradients (which work in every browser ever) and lets advanced users explore newer colour spaces in their own code.

One more practical note: gradients are accessibility-neutral but can affect readability of overlaid text. If you put light text on a gradient background, make sure the colour contrast at the lightest point of the gradient still passes WCAG AA (4.5:1 for body text). The presets in this tool are designed to keep contrast in mind, but custom gradients can quickly drop into illegible territory. Always test with overlay text before shipping.

10 Things to Know About CSS Gradients

Webkit shipped them first in 2008. CSS gradients started as Apple's -webkit-gradient extension before being standardised in CSS Image Values Level 3 (2012). Vendor prefixes have not been needed in over a decade.

Three native types cover everything. linear-gradient(), radial-gradient(), and (since 2020) conic-gradient(). Stack them with commas to layer complex compositions.

Zero KB payload. A gradient that would have been a 50 KB JPEG in 2010 is now a one-line CSS declaration of about 60 bytes. Best part: it scales infinitely without compression artefacts.

GPU-rendered on every modern browser. Browsers compute gradients on the GPU at native resolution. A 4K hero gradient costs essentially the same to render as a 720p one.

The sRGB "muddy middle" problem. Linear interpolation in sRGB makes gradients pass through dull mid-tones. The fix: linear-gradient(in oklch, ...) interpolates in a perceptually uniform colour space.

Angles work in three notations. 45deg, 0.25turn, or to bottom right — all valid. Degrees count clockwise from "to top" being 0°. Many developers get this wrong.

Conic gradients enable pure-CSS pie charts. Before conic-gradient() (2020), pie charts required SVG or canvas. Now: conic-gradient(red 0% 30%, blue 30% 70%, green 70% 100%) — a complete chart in one line.

Stripes are a clever hack. Hard colour stops at the same position create solid bands: linear-gradient(90deg, red 50%, blue 50%) renders as half-red, half-blue with no transition. Great for barcodes, dividers, candy stripes.

Background-clip + gradient = gradient text. background: linear-gradient(...); -webkit-background-clip: text; color: transparent; produces text painted with a gradient. Used everywhere from hero headlines to logo treatments.

Accessibility still matters. Overlaid text on gradients can drop below WCAG contrast ratios at the brightest point. Always verify 4.5:1 contrast at every point of your gradient where text sits.

Frequently Asked Questions

linear-gradient() transitions colours along a straight line at a specified angle — best for backgrounds, button hovers, and directional fades. radial-gradient() emanates colours outward from a centre point — best for spotlight effects, sphere-shaped buttons, and focal-point backgrounds. conic-gradient() sweeps colours around a centre point — best for pie charts, donut indicators, and colour wheels. All three work in every modern browser without vendor prefixes.
This generator caps at 6 stops for usability, but CSS itself has no hard limit — you can technically use as many as you like. Most well-designed gradients use 2 to 4 stops. More than 5 typically produces muddy, oversaturated results because the eye can't distinguish closely spaced colours in a continuous transition.
It sets the direction of the colour transition. 0deg goes from bottom to top, 90deg goes left to right, 180deg goes top to bottom, 270deg goes right to left. You can also use keywords like to bottom right for diagonal sweeps. Modern browsers also accept turn units (0.25turn = 90°).
Universal in modern browsers. Linear and radial gradients have been supported without vendor prefixes since Chrome 26, Firefox 16, Safari 6.1, and Edge — every browser shipped in the last 10+ years. Conic gradients arrived in 2020 (Chrome 69, Safari 12.1, Firefox 83) so are safe to use in any production codebase today.
Yes — without restriction. CSS code is not copyrightable in any meaningful sense, and what you produce here is yours to use however you like: client work, products, open-source projects, agency design systems. We don't add watermarks, don't require attribution, don't track usage.
Because browsers interpolate gradient colours in sRGB by default — which isn't a perceptually uniform colour space. Transitioning between vibrant colours (like red and blue) produces dull mid-tones because sRGB places them on different lightness curves. The fix is linear-gradient(in oklch, red, blue) — interpolation in OKLCH produces smoother, brighter transitions. Supported in Chrome, Safari, and Firefox since 2024.
Use this CSS pattern: background: linear-gradient(45deg, red, blue); -webkit-background-clip: text; color: transparent; The gradient is set as the background, then clipped to the text shape, then the text colour is made transparent so the gradient shows through. Works in every modern browser.
Yes, with care. CSS Houdini's @property lets you register gradient parameters as animatable. Without Houdini, you can fake animation by transitioning background-position on a large gradient or by using CSS variables that get updated in JavaScript. Direct transition on the background-image value doesn't work in most browsers — that's the trap most developers hit first.
They can be, if you check contrast. WCAG AA requires 4.5:1 contrast ratio between body text and its background. Gradients vary in lightness across their surface, so you need to verify contrast at every point where text overlays the gradient — including the lightest spot. Many gradient hero backgrounds fail this check at one end. Test with Chrome's built-in colour-contrast inspector.
CSS gradients are universally better for solid colour transitions: zero KB payload, infinite scaling, pixel-perfect on all displays, instant load. Images still beat CSS for photographic gradients (real sunsets, textured surfaces, hand-painted effects) where you need detail beyond what colour stops can describe. Rule of thumb: if a designer's gradient could plausibly be described with 2–6 colour stops, use CSS.

CSS Gradient Generator