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

Linear transitions along a straight line. Radial radiates from a center point. Conic sweeps colors around a center point like a color wheel.

How do I add more than two colors to my gradient?

Click Add color stop. Pick a color and drag the position slider to place it.

How do I copy the CSS and use it in my project?

Click Copy CSS for the full property or Copy value only for just the gradient string.

What do the color stop positions mean?

Positions are percentages from 0 to 100 showing where each color is fully rendered along the gradient.

🎨 Image Design ✔ Free Forever

Gradient Generator Online Free

Create linear, radial, and conic CSS gradients with a live preview. Add multiple color stops, set angles, and copy the final CSS code with one click. No install needed.

✔ Linear gradients ✔ Radial gradients ✔ Conic gradients ✔ Multiple color stops ✔ Instant CSS output

All Image Design Tools

CSS Code

Gradient Type

Angle

135°

Color Stops

Presets

About This Tool

The preview is not a picture of a gradient, it is the gradient

This tool does not rasterise anything. It writes real CSS gradient syntax and assigns it to a preview element’s background property. What you are looking at is produced by your browser’s own gradient renderer, because it is your browser’s own gradient renderer. Copy the string, paste it into a stylesheet, and you get an identical result with no conversion step anywhere in the chain.

Linear, 135deglinear-gradient(135deg, #f43f5e 0%, #f59e0b 100%)

Radial, circleradial-gradient(circle, #8b5cf6 0%, #1e1b4b 100%)

Conic sweepconic-gradient(from 0deg, #06b6d4, #8b5cf6, #f43f5e, #06b6d4)

Hard stoplinear-gradient(90deg, #10b981 45%, #0ea5e9 55%)

That fourth swatch is worth noting. Put two stops close together and the blend compresses into a sharp edge. Put them at the identical position and you get a hard line with no transition at all, which is how CSS stripes and split backgrounds are built without a single image file.

Stops are just a list of pairs

Internally a gradient is nothing more than an array of colour and position pairs, position expressed as a percentage. Adding a stop pushes an entry. Dragging a slider mutates one in place.

0%#f43f5e 35%#a855f7 100%#0ea5e9

Stops do not have to be evenly spaced, and they do not have to be sorted. CSS accepts them in any order and resolves overlaps by clamping, which is exactly how this tool treats them. Bunching three colours near one edge produces a fast transition there and a long lazy blend across the rest.

// the whole builder function buildCSS() { var stops = ggStops .map(function(s) { return s.color + ‘ ‘ + s.pos + ‘%’; }) .join(‘, ‘); if (ggType === ‘linear’) return ‘linear-gradient(‘ + ggAngle + ‘deg, ‘ + stops + ‘)’; if (ggType === ‘radial’) return ‘radial-gradient(circle, ‘ + stops + ‘)’; return ‘conic-gradient(from ‘ + ggAngle + ‘deg, ‘ + stops + ‘)’; }

Because that returns a plain string, the value in the code box and the value painting the preview are the same variable. There is no separate export path that could drift.

Three gradient functions, three mental models

linear-gradient

Shape: colours travel along a straight line across the box.

Angle: 0deg points up, 90deg points right. Clockwise, unlike most maths conventions.

Use: hero backgrounds, buttons, overlays.

radial-gradient

Shape: radiates outward from a centre point.

Angle: ignored entirely. A circle has no direction.

Use: spotlights, vignettes, soft focal glows.

conic-gradient

Shape: sweeps around a centre like a clock hand.

Angle: sets where the sweep starts.

Use: pie charts, progress rings, colour wheels, loading spinners.

Radial here always means circle, never ellipse. CSS supports both, and the default in the spec is actually ellipse, which stretches to match a non square box. This tool hardcodes circle. In a wide preview the circle will clip against the shorter dimension. That is correct behaviour for the syntax being generated, not a rendering fault.

The interpolation problem nobody mentions

Blend blue into yellow and CSS walks a straight line through sRGB, which passes through a muddy grey in the middle. It happens because sRGB is not perceptually uniform, so the mathematical midpoint between two colours is often not the visual midpoint.

Modern CSS can fix this. Colour Level 4 lets you name the interpolation space, and blending through Oklab or LCH keeps saturation intact across the transition:

linear-gradient(in oklab, blue, yellow) linear-gradient(in oklch longer hue, blue, yellow)

Browser support arrived across Chrome, Safari and Firefox during 2023, so it is safe for most audiences now. This tool outputs plain sRGB syntax for maximum compatibility, but if a two colour blend looks washed out in the middle, adding in oklab to the copied string is usually the fix.

Stop controls

Add and remove

A gradient needs at least two stops to interpolate. The delete control disables at two, so the tool cannot emit an invalid single colour gradient string.

Position sliders

Each percentage is independent. Unsorted and unevenly spaced values are both legal and both useful.

Preset library

Ten two and three stop combinations, each swapping the stops array wholesale as a starting point before you adjust angle and position.

CSS gradient references

linear-gradient() on MDN, including the angle convention and how corner keywords resolve.
radial-gradient() covers the ellipse shape and sizing keywords this tool does not expose.
conic-gradient() including the hard stop technique used for pie charts.
CSS Images Module Level 3 is the specification defining all three functions.
Colour interpolation spaces in Colour Level 4, for the Oklab and LCH syntax above.
A perceptual colour space for image processing, Björn Ottosson’s original write up on why Oklab blends more cleanly than sRGB.

Design work this speeds up

Building a hero background for a landing page, generating a subtle card overlay for a design system, prototyping a brand colour transition before handing specs to a developer, or grabbing a conic gradient for a progress ring. Because the output is copy and paste CSS rather than an exported image, it drops into a stylesheet with no asset pipeline, no retina variants, and no extra network request.

Common Questions

FAQ: Gradient Generator Online Free

Yes, completely free. No account, no signup, and no payment required at any point.

A linear gradient transitions colors along a straight line at a set angle. A radial gradient radiates outward from a center point in a circular or elliptical pattern. A conic gradient sweeps colors around a center point like a color wheel. Each type produces a visually distinct look and suits different design contexts.

Click the Add color stop button below the existing stops. A new stop appears at 100%. Pick a color and drag its position slider to the spot you want. You can add as many stops as needed.

Click Copy CSS to copy the full background property including the property name. Click Copy value only if you want just the gradient string to use in a shorthand or inside another CSS value. Paste either directly into your stylesheet.

Linear and radial gradients have excellent cross-browser support and work in all modern browsers. Conic gradients work in Chrome, Edge, Firefox, and Safari but may need a prefix or fallback for some older browser versions. Check Can I Use if you need to support legacy environments.

Color stop positions are percentages from 0 to 100 representing where along the gradient each color is fully rendered. A stop at 0% is at the very start, 50% is the midpoint, and 100% is the end. Colors transition smoothly between adjacent stops.

From the blog