CSS Gradient Generator — linear and radial

Pick colours, drag stops, choose an angle. The CSS rule is generated and previewed live, ready to paste into your stylesheet.

What is a CSS gradient?

A CSS gradient is a smooth transition between two or more colours, generated by the browser without any image asset. The two flavours that ship in every modern browser are linear-gradient (a straight line of colour change at a chosen angle) and radial-gradient (concentric rings around a centre point).

Because gradients are computed in CSS, they scale to any size without losing quality, weigh nothing in the bundle, and respond to dark mode or media queries the same way any other CSS rule does. They are the right call for hero backgrounds, button highlights, card overlays and decorative dividers — anywhere you would otherwise drop a flat or noisy image.

How to use this tool

Pick a mode (linear or radial) and, for linear, set the angle in degrees. 0 is bottom-to-top, 90 is left-to-right, 135 is top-left to bottom-right.
Add or remove colour stops, drag each stop's position slider, and pick its colour. Two stops minimum, six maximum.
Copy the CSS rule from the preview pane. Paste it into your stylesheet's background property — that's it.

Frequently asked questions

How many colour stops can I add?

Up to six in this tool — beyond that the gradient gets muddy and the CSS hard to maintain. The CSS spec itself does not impose a hard cap.

What's the difference between linear and radial?

Linear sweeps colour along a straight axis (you set the angle). Radial sweeps colour outward from a centre point in concentric rings — great for spotlight or vignette effects.

Will the gradient look the same in every browser?

Yes. linear-gradient and radial-gradient have full support in every modern browser since 2014. Older syntax with -webkit- and -moz- prefixes is no longer needed.

How do I get a smooth transition without banding?

Banding usually appears on long gradients between similar colours. Avoid two stops where the colour difference is tiny over a large screen, add intermediate stops, or apply a slight noise overlay (background-image: linear-gradient(…), url(noise.png)).

Can I use this for dark mode?

Absolutely — generate two CSS rules, one per mode, and swap them with @media (prefers-color-scheme: dark) or a CSS variable. Keep the gradient direction the same to avoid visual disorientation.

Common use cases

Where a gradient delivers more visual punch than a flat colour.

Landing page hero

A two-stop linear gradient between two on-brand colours adds depth without the weight of an image. Pair with a slight overlay for legible text.

Card or button accents

Subtle radial gradients on cards (centre lighter than edges) imply elevation without a hard shadow. Linear gradients on CTA buttons add a press-affordance look.

Section dividers

A horizontal linear-gradient from transparent to a tint and back makes a soft divider that beats a flat 1px line on busy pages.

Loading skeletons

Animate a linear-gradient's background-position to produce the shimmer effect popular on skeleton placeholders. No JS needed.

Tips and shortcuts

Small choices that make gradients look professional.

Stay close in hue

Two colours separated by 30°-60° on the colour wheel almost always look better than complementary opposites. Tools like coolors.co can pick harmonious pairs.

Test on real content

A gradient that looks great in isolation can fight with text on top. Always preview with the headline and body copy in place; adjust opacity if needed.

Reach for radial sparingly

Radial gradients are striking but draw attention away from content. Use one per page maximum, ideally for a spotlight effect on a CTA, not as a section background.

Save with CSS variables

Define your gradient stops as --grad-start and --grad-end variables. Theming, dark mode and one-off overrides become a single line change instead of hunting through stylesheets.