CSS Gradient Generator — linear & radial, free

Build a linear or radial CSS gradient with unlimited colour stops and a live preview, then copy production-ready CSS. Free, instant, no sign-up needed.

Type

Angle · 135°

From

About the Gradient generator tool

CSS gradients are drawn by the browser rather than downloaded, which makes them one of the few visual effects that cost nothing. A background image adds a network request and tens or hundreds of kilobytes; the equivalent gradient is a line of CSS that renders instantly, scales to any screen size without blurring, and stays sharp on high-density displays. For hero sections, buttons, cards and overlays, that is a straightforward win.

The syntax is where people get stuck, and mostly on the angle. In CSS, 0deg points upward and angles increase clockwise, so 90deg runs left to right and 180deg runs top to bottom. That last one is the most common gradient on the web and also the default, which is why omitting the angle entirely often gives exactly what you wanted. Being able to drag an angle and watch the result removes the guesswork.

Colour stops are the other half. Two colours give a simple blend, but the interesting results come from controlling where each colour sits — placing two stops close together creates a sharp band rather than a smooth transition, and placing them at identical positions produces a hard edge, which is how striped and split backgrounds are built without any image at all.

One thing worth knowing is that a gradient between two distant hues can pass through a muddy grey in the middle, because the interpolation runs in a colour space that does not match how we perceive brightness. Blending between hues that are near each other on the colour wheel avoids it, as does adding an intermediate stop to steer the path. If a gradient looks dull in the centre despite two vivid endpoints, that is the cause.

How it works

Choose linear or radial

Linear runs along an angle you set; radial spreads outward from a centre point. Both preview live.

Set the colours and angle

Pick your stops and drag the angle. The preview updates continuously so you can judge it by eye.

Copy the CSS

Take the generated declaration straight into your stylesheet. It is production-ready with no editing.

Frequently asked questions

How do CSS gradient angles work?: Zero degrees points straight up and the angle increases clockwise, so 90deg goes left to right, 180deg goes top to bottom and 270deg goes right to left. This catches people out because it differs from the mathematical convention. 180deg is the browser default, which is why gradients written without an angle flow downward.
When should I use radial instead of linear?: Radial suits anything that should feel like it emanates from a point — a soft glow behind a focal element, a spotlight effect, a subtle vignette at the edges of a section. Linear suits backgrounds, buttons and overlays where you want an even directional transition. Linear is the right default; radial is for when the effect has a centre.
Why does my gradient look muddy in the middle?: Because interpolating between two distant hues passes through desaturated territory in the default colour space, which reads as grey or brown. Blend between hues closer together on the colour wheel, or add an intermediate colour stop to steer the transition through a route that stays vivid. Modern CSS also allows specifying a perceptual interpolation space.
Are gradients better than a background image?: For flat colour transitions, considerably. A gradient is a line of CSS with no network request, no file to cache and no resolution — it stays perfectly sharp on any display at any size. An image is only preferable when you need texture, photography or detail that cannot be expressed as a blend between colours.
Do I need vendor prefixes?: No. Unprefixed linear-gradient and radial-gradient have been supported by every browser in current use for many years. Prefixed versions are only relevant for very old browsers that no longer receive security updates, and carrying them forward adds noise to a stylesheet for no practical benefit.
Can I use more than two colours?: Yes — a gradient accepts as many stops as you want, each with an optional position. Multiple stops are how you build subtle multi-tone backgrounds, and placing two stops at the same position creates a hard edge instead of a blend, which is the technique behind stripes and split backgrounds made entirely in CSS.
Can gradients be animated?: Not directly — a gradient is a background image as far as CSS is concerned, and background images do not interpolate between states. The usual approaches are animating background-position on an oversized gradient to make it appear to move, or transitioning the opacity of a second gradient layered on top of the first.