What's the difference between linear, radial and conic gradients?

A linear gradient blends colors along a straight line at an angle you choose. A radial gradient radiates outward from a center point, as a circle or ellipse. A conic gradient sweeps colors around a center point like a clock hand - perfect for color wheels and pie charts. This tool builds all three, plus their repeating variants.

Why does my gradient look banded or muddy in the middle?

By default CSS blends colors in the sRGB space, which can create a dark, muddy midpoint between two saturated colors. Turn on OKLCH and the tool emits `linear-gradient(in oklch, ...)`, blending in a perceptually-uniform space for smoother, brighter transitions in modern browsers.

Can I add transparency to a gradient?

Yes. Every color stop has an opacity slider; below 100% the tool outputs that stop as an `rgba()` color. Fading a gradient to transparent is the trick behind image overlays, 'read more' fades and soft section dividers.

How many color stops can I use?

As many as you like - click the ramp or 'Add stop' to insert one, then drag the handles to reposition. Two or three stops usually read best; pile on too many close together and the gradient starts to look busy.

What does the angle control?

For linear gradients the angle sets the direction of the blend: 0° points up, 90° points right, 180° points down. For conic gradients it sets where the sweep begins. Radial gradients have no angle - you control the shape and center position instead.

How do I make stripes or a hard edge instead of a smooth blend?

Give two stops the same position (both at 50%, say) and the color switches instantly with no blend - that's a hard stop. Use a repeating-linear gradient with tightly-spaced stops to tile stripes, checks or a barber-pole pattern.

Can I use the output with Tailwind or as a background-image?

The tool outputs a standard `background:` value. Use it as-is, or move it to `background-image` when you also want a `background-color` fallback. In Tailwind, drop it into an arbitrary value like `bg-[linear-gradient(...)]`.

CSS Gradient Generator

Linear, radial and conic CSS gradients with a live preview, presets and one-click copy.

Type

Presets

OKLCH (smoother blend)

Angle (°): 135°

Color stops

Opacity: 100%

CSS

background: linear-gradient(135deg, #0a7cff 0%, #a855f7 100%);

Preview

Pick a gradient type, drag the angle, and edit color stops right on the gradient ramp - or start from a preset. Add transparency per stop, switch on OKLCH for smoother blends, and copy a ready-to-use `background` declaration. Everything runs in your browser and updates live as you tweak.

How to use it

Pick a type or preset
Choose linear, radial or conic (or a repeating variant), or load a preset to start from a polished look.
Shape the gradient
Drag the angle, set the radial shape and position, and edit color stops on the ramp - click to add, drag a handle to move.
Fine-tune the color
Adjust each stop's opacity and turn on OKLCH for smoother, more vivid blends between saturated colors.
Copy or share
Copy the ready-to-use `background` CSS, or use Copy link to share the exact gradient with a teammate.

What is it?

A CSS gradient is a smooth, resolution-independent blend between two or more colors, drawn by the browser with no image file. This generator builds the full `linear-gradient()`, `radial-gradient()` or `conic-gradient()` function (plus their repeating variants) from a list of color stops - each with a color, a position and an opacity. Because it's pure CSS, a gradient scales to any size, costs almost nothing to render, and never pixelates.

When to use it

Reach for a gradient when you want depth without the weight of an image: hero and section backgrounds, button and card highlights, glassy overlays, brand accents, dark-mode surfaces, or a fade from a photo into your page color. Conic gradients double as lightweight pie charts, color wheels and spinners; repeating gradients make stripes, grids and patterns.

Common mistakes

Cramming in too many stops makes a gradient look busy - two or three usually read best. Blending fully-saturated complementaries (red into green) in sRGB gives a muddy middle; add a neutral midpoint or switch on OKLCH. Don't forget a `background-color` fallback for the rare browser that can't parse your syntax, and remember that very subtle gradients can disappear on low-quality screens.

FAQ

What's the difference between linear, radial and conic gradients?: A linear gradient blends colors along a straight line at an angle you choose. A radial gradient radiates outward from a center point, as a circle or ellipse. A conic gradient sweeps colors around a center point like a clock hand - perfect for color wheels and pie charts. This tool builds all three, plus their repeating variants.
Why does my gradient look banded or muddy in the middle?: By default CSS blends colors in the sRGB space, which can create a dark, muddy midpoint between two saturated colors. Turn on OKLCH and the tool emits `linear-gradient(in oklch, ...)`, blending in a perceptually-uniform space for smoother, brighter transitions in modern browsers.
Can I add transparency to a gradient?: Yes. Every color stop has an opacity slider; below 100% the tool outputs that stop as an `rgba()` color. Fading a gradient to transparent is the trick behind image overlays, 'read more' fades and soft section dividers.
How many color stops can I use?: As many as you like - click the ramp or 'Add stop' to insert one, then drag the handles to reposition. Two or three stops usually read best; pile on too many close together and the gradient starts to look busy.
What does the angle control?: For linear gradients the angle sets the direction of the blend: 0° points up, 90° points right, 180° points down. For conic gradients it sets where the sweep begins. Radial gradients have no angle - you control the shape and center position instead.
How do I make stripes or a hard edge instead of a smooth blend?: Give two stops the same position (both at 50%, say) and the color switches instantly with no blend - that's a hard stop. Use a repeating-linear gradient with tightly-spaced stops to tile stripes, checks or a barber-pole pattern.
Can I use the output with Tailwind or as a background-image?: The tool outputs a standard `background:` value. Use it as-is, or move it to `background-image` when you also want a `background-color` fallback. In Tailwind, drop it into an arbitrary value like `bg-[linear-gradient(...)]`.