CSS Gradient Generator Online - Free Gradient Maker

Features

Linear / radial / conic

Multiple color stops

Angle / direction control

Live preview & CSS code

How to Use

1. Choose a gradient type and angle; the stage previews it at full size.

2. Drag the handles on the track to move stops, click an empty spot on the track to add one (up to six), or fine-tune with the color wells and percentage fields.

3. Copy the generated CSS — check it against the checker surface to spot banding over transparency.

About this tool

CSS gradients paint smooth colour transitions without image files, so they stay sharp at any size and cost nothing to download. This generator builds the three native types: linear-gradient along an angle, radial-gradient spreading from the centre, and conic-gradient sweeping around a point like a colour wheel. Drag the handles on the track to move colour stops, click the track to add a stop (up to six), and fine-tune colours and positions with the fields. The stage previews the result at full size, and a checker surface reveals banding or unexpected transparency. The output is standard CSS that works in all current browsers, ready to paste into a background or background-image declaration.

Frequently Asked Questions

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

A linear gradient changes colour along a straight line at a chosen angle. A radial gradient spreads outward from a centre point in a circle or ellipse. A conic gradient rotates colours around a centre point, which is useful for pie charts and colour wheels.

How do gradient angles work?

0deg points upward, 90deg to the right, 180deg downward and 270deg to the left. So linear-gradient(90deg, red, blue) starts red on the left and ends blue on the right.

Why does my gradient show visible bands?

Banding appears when two similar colours stretch over a large area, especially on 8-bit displays. Adding an intermediate stop, choosing colours with more contrast, or adding a subtle noise texture helps.

Can a gradient include transparency?

Yes. Use colours with alpha, such as rgba or 8-digit HEX. Note that fading to the keyword transparent may produce a greyish middle in some cases; fading to the same colour with zero alpha looks cleaner.

Can I use a gradient as text colour or border?

Yes, with extra CSS. For text, set the gradient as background, then use background-clip: text and a transparent text colour. For borders, border-image or a background on a wrapper element are common approaches.