Gradient Generator

Design linear, radial, and conic CSS gradients with a live preview and copy-ready CSS output. Pick the gradient type, set an angle or shape, and add between two and five colour stops with custom positions and hex values. A "shuffle colours" button gives you a fresh palette instantly, and built-in presets cover the most common looks (sunset, ocean, mint, rainbow, mono). Every change updates the preview pane in real time, and the validation line under the CSS output tells you whether the generated string is parseable by the browser. Copy with one click and paste into your stylesheet, React style prop, or design tool. Everything runs in your browser, no upload, no server round-trip.

CSS gradients are images, that is the single most important thing to understand about them. They are images piped through the background-image property (and the related border-image, mask-image, and list-style-image properties). Resolution-independent, they scale crisply from a 320-pixel phone screen to a 4K monitor, which is why gradients have largely replaced sliced PNG buttons in modern web design.

A gradient is built from three things: a direction (or shape), two or more colour stops, and an optional interpolation hint. The default is sRGB, but CSS Color Module Level 4 allows in oklch, in oklab, in lab, in lch, in hsl, and in hwb.

How to Use This Tool

1. Pick a gradient type: linear, radial, or conic.
2. Set the angle (linear / conic, 0 to 360°) or shape (radial: circle or ellipse).
3. Add between two and five colour stops, each with a colour picker, hex text field, and position (0 to 100%).
4. Use "shuffle colours" to randomise the palette, or pick a preset (sunset, ocean, mint, rainbow, mono).
5. Click Copy to copy the CSS to your clipboard.

The preview pane fills the output area with the gradient at its current settings, so you see exactly what the browser will render. The CSS output panel shows the full background: <gradient>; line. The validator inserts the gradient into a throwaway CSSStyleSheet and reports whether the parser accepted it, the most reliable check that you have not produced a syntactically invalid string.

Linear, Radial, and Conic: Syntax Differences

The three gradient functions share the same general shape, a direction or shape, followed by a comma-separated list of colour stops, but they differ in how the colour transitions are drawn.

Linear gradients move along a straight line. The angle is measured from the bottom of the box, so 0deg points straight up, 90deg points right, and 180deg points down. linear-gradient(90deg, red, blue) therefore renders red on the left and blue on the right. With no angle supplied, the default is 180deg (bottom to top, equivalently "to top"). The "to" syntax is interchangeable with degrees: to right is the same as 90deg, to bottom right is the same as 135deg. Pick the keyword form for orthogonal angles, the degree form when you need a non-cardinal angle.

Radial gradients radiate outward from a centre point. The shape defaults to ellipse (matching the box's aspect ratio) and the size defaults to farthest-corner. With a circle shape in a square box, radial-gradient(circle, red, blue) draws a true circle that's red at the centre and blue at the edge. The position can be customised with at <position>, e.g. circle at 30% 70% puts the centre near the bottom-left.

Conic gradients sweep around a centre point. By default the sweep starts at 12 o'clock and rotates clockwise. conic-gradient(red, blue, red) renders red at the top, blue at the 180° mark, and red again at the top, a colour wheel. Use from <angle> to rotate the starting position, and at <position> to move the centre. Conic gradients are the basis of pie charts, colour wheels, and loading spinners.

Colour Stops

Each stop is a <color> optionally followed by a position. Positions are written as either a length (e.g. 20px) or a percentage of the gradient line's length. Two stops with no explicit position are placed at 0% and 100% automatically. If you set explicit positions, the browser will spread evenly between them. A stop at the same position as the previous one creates a hard edge, useful for two-tone "split" backgrounds.

You can put any valid CSS colour in a stop: hex (#ff7e5f), named (tomato), rgb / rgba, hsl / hsla, hwb, lab, lch, oklab, oklch, or color(). The generator stores stops as hex so they round-trip cleanly with the colour picker. CSS Color Module Level 4 also lets you specify the interpolation colour space after the colour stop, e.g. linear-gradient(in oklch longer, red, blue).

Hard-stop transitions (two stops at the same position) are an underused technique. linear-gradient(90deg, #1e3a8a 0% 50%, #f59e0b 50% 100%) produces a hard edge between dark blue and amber that is impossible to recreate with a simple background colour. You can chain several hard stops to build flag-style backgrounds, alert bars, and chart axis marks.

Angle Reference

Linear and conic gradients use the same angle convention: 0deg points "to top" (upward), 90deg points "to right", 180deg points "to bottom", 270deg points "to left". Adding or subtracting 360deg gives the same result. The CSS Working Group angle reference is the same as the standard mathematical convention but with the y-axis flipped, so visually a CSS "90deg" is what you'd get by rotating a clock hand 90° clockwise from the 12.

Quick reference: 0° = up, 45° = up-right, 90° = right, 135° = down-right, 180° = down, 225° = down-left, 270° = left, 315° = up-left.

For diagonal gradients, the most common angles are 45° and 135°. They give the "ribbon" look you see in tooltips, call-out boxes, and call-to-action buttons. A horizontal gradient that uses 0deg or 180deg is usually a dead giveaway that the design was rushed, most designers prefer 5 to 15° off vertical for a more dynamic feel.

Worked Examples

Sunset background: background: linear-gradient(90deg, #ff7e5f, #feb47b);, a classic two-stop gradient running left-to-right. The transition is smooth because the two stops are at the default 0% and 100% positions. This is the gradient that powers hero sections on countless landing pages.

Spotlight effect: background: radial-gradient(circle at 30% 30%, #fff 0%, #000 80%);, a small white "spotlight" near the top-left fading to black at 80% of the way to the corner. Pair with text-shadow and you have a movie-poster look.

Loading spinner: background: conic-gradient(from 0deg, #2563eb 0% 25%, #e5e7eb 25% 100%);, a 90° blue arc on a grey track. Animate from 0deg to from 360deg for a rotating spinner. The animation works because the angle is a registered CSS custom property (@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }).

Hard split background: background: linear-gradient(90deg, #1e3a8a 0% 50%, #f59e0b 50% 100%);, two stops at the same position (50%) create a hard edge between dark blue and amber. Useful for hero sections, banner advertisements, and split-screen layouts.

Repeating stripes: background: repeating-linear-gradient(45deg, #6366f1 0 10px, #a5b4fc 10px 20px);, the repeating-linear-gradient variant tiles the gradient infinitely. Great for caution-tape effects, repeating watermarks, and chart backgrounds.

Mesh-ish layered radial: background: radial-gradient(at 20% 20%, #ff6b6b 0%, transparent 50%), radial-gradient(at 80% 30%, #4ecdc4 0%, transparent 50%), radial-gradient(at 50% 80%, #ffe66d 0%, transparent 50%), #1a1a2e;, four layered backgrounds: three coloured radial blobs over a dark base. This is the closest CSS has to a gradient mesh, and it is what design tools like Stripe Mesh are built on top of.

Where Gradients Show Up

• Web design, hero sections, call-to-action buttons, card backgrounds, and section dividers. The single most common use, by a wide margin.
• Branding, Instagram, Spotify, and Stripe all use gradient meshes as part of their visual identity.
• Data visualisation, colour ramps for heat maps, choropleth maps, and continuous data scales. The Viridis, Plasma, and Inferno palettes from matplotlib are CSS gradients in disguise.
• App icons and splash screens, modern mobile design systems lean heavily on gradient meshes. Apple's iOS 14+ widgets use conic gradients on dial faces.
• Game UI, skyboxes, progress bars, ability cooldown overlays, and loot-tier backgrounds. Most MMORPGs use radial gradients in the world map and conic gradients in the circular minimap.

Common Mistakes

• Forgetting the angle on a linear gradient. The default is 180deg (to top), which is rarely what you want when prototyping. Almost every "my gradient is the wrong way" bug is missing or wrong direction. If you want a horizontal gradient, write to right or 90deg explicitly.
• Mixing up degrees and "to" keywords. to right is equivalent to 90deg, not 0deg. to right argues from the destination; 90deg argues from the direction of motion.
• Positioning stops out of order. Positions can be in any order in the source, but the browser will reorder them. A stop at position 80% followed by a stop at position 20% is silently accepted and re-sorted. This is rarely what you want.
• Using an unsupported colour format. color(display-p3 1 0 0) needs a recent browser. #rrggbbaa (8-digit hex with alpha) is supported in all modern browsers but parses incorrectly in older parsers.
• Expecting gradients to interpolate in a specific colour space. By default, gradients interpolate in sRGB, which is perceptually uneven. A gradient from red to blue passes through purple, the famous "muddy middle" problem. For perceptually-uniform transitions, use in oklch after the colour stop (linear-gradient(in oklch, red, blue)).
• Forgetting background-color fallback. If the gradient fails to parse (e.g. an old browser), the element will be transparent. Always set a background-color fallback as well.
• Using a gradient where a solid colour suffices. A gradient on a 14-pixel-tall button border is invisible at normal viewing distances. Use gradients where they will be visible, large backgrounds, hero sections, accents.

Frequently Asked Questions

What is the difference between linear, radial, and conic gradients?

Linear gradients interpolate along a straight line. Radial gradients interpolate outward from a centre point along a circle or ellipse. Conic gradients interpolate around a centre point along an angle sweep, the colour at each pixel depends on the angle of that pixel from the centre, not the distance. Conic gradients are the basis of pie charts, colour wheels, and loading spinners.

What does "gradient angle" mean?

The angle is the direction the gradient flows. In CSS, 0deg points upward (to the top of the box), 90deg points right, 180deg points down, and 270deg points left. The angle is the direction of motion of the second colour stop relative to the first; if you reverse the angle you also reverse the order of the colours.

Can I use CSS custom properties (variables) in a gradient?

Yes. Replace any colour with a var(--name) reference, e.g. linear-gradient(90deg, var(--from), var(--to)). The browser will resolve the variable at paint time. This is the standard way to make a gradient themeable. You can also interpolate the gradient function itself if you register the relevant property with @property.

Can I animate a CSS gradient?

Not directly, the gradient function is not an animatable property in CSS. The standard workaround is to animate background-position on a gradient that's larger than its container, or to use @property with a registered custom property to animate the colour stops. The conic-gradient spinner example above uses from <angle>deg with the angle animated via a CSS custom property registered with @property.

What is the browser support for these gradients?

Linear and radial gradients have been universally supported since around 2012 (IE10, all modern browsers). Conic gradients landed in Chrome 69, Firefox 83, and Safari 12.1 (2020). For older browsers, provide a solid background-color fallback or a static image.

What does "premultiplied alpha" mean and why does it matter for gradients?

Gradients are rendered in premultiplied alpha space, colour components are interpolated independently of the alpha. This is why a gradient from rgba(255,0,0,1) to rgba(0,0,255,0) does not go through grey, it goes through translucent red, then translucent purple, then transparent blue. For "colour-preserving" alpha transitions, render the gradient over a solid background of the colour you want to see through.

How do I create a gradient mesh?

CSS does not have a true gradient mesh. The closest you can get is to layer multiple radial gradients with transparent centres on top of each other, which is how libraries like mesher.css and Mesh Gradient by Stripe work. SVG <radialGradient> with multiple offsets is the standard answer when you need a real mesh.

Can I use gradients as text colour?

Yes, use background: linear-gradient(...); -webkit-background-clip: text; background-clip: text; color: transparent;. The result is text filled with the gradient. Text gradients cannot be animated in CSS directly; you have to animate the position of the gradient.

What is the difference between "to right" and "90deg"?

They are equivalent in linear gradients. to right means "the gradient line goes from the left edge to the right edge", which is the same direction as a 90deg angle. The "to" keywords are more readable; the degree value is more flexible.

Why does my conic gradient look uneven?

Conic gradients interpolate in the angular dimension, so the apparent colour distribution depends on the radius at which you look. A small conic gradient with a 90° blue arc looks evenly spaced; a large one with the same arc looks like a wedge. Render the conic gradient at the same size you want to view it, or use a mask to crop it.

Can I save my gradient to use later?

Yes, bookmark the page. The tool's state is in-memory, so closing the tab will reset it. For a more permanent solution, copy the CSS into your stylesheet or a design system variable. Most teams store gradients as CSS custom properties (--gradient-primary: linear-gradient(90deg, #ff7e5f, #feb47b);).

Why does my gradient look different on different browsers?

The four main sources of cross-browser gradient differences are: (1) hue interpolation in sRGB vs oklch, (2) the position of the centre in radial gradients, (3) the rendering of transparent stops, and (4) the subpixel rounding of stop positions. None are bugs, they are spec details. If you need pixel-perfect rendering, use a static image.

References

• MDN, CSS linear-gradient(), syntax, formal definition, and visual examples.
• MDN, CSS radial-gradient(), shape, size, and position arguments.
• MDN, CSS conic-gradient(), conic-gradient syntax, including from <angle> and at <position>.
• W3C, CSS Images Module Level 3, the formal specification for all three gradient functions.
• CSS Color Module Level 4, colour syntax used inside gradients (oklch, lab, color()).
• CSS Houdini @property API, registering custom properties for animated gradient angles.
• web.dev, CSS Gradient Borders, Mesh Gradients, and Noise, practical pattern library.
• Stripe, Mesh Gradient, production-grade layered radial gradient engine.

Related Tools

• Colour Picker, pick a single colour with HEX, RGB, and HSL readouts.
• Colour Palette Generator, generate complementary, analogous, and triadic palettes from any base colour.
• Colour Converter, convert between HEX, RGB, HSL, and HSV representations.
• Contrast Ratio Checker, verify WCAG AA and AAA contrast for text on a gradient background.