CSS Gradient Generator

Design linear, radial, and conic CSS gradients with live preview.

Type: LINEARAngle: 135°Stops: 2CSS Length: 62 chars

Presets

Hover to preview · Click to apply

Type

Angle (135°)

Color stops

Opacity100%

100%

Opacity100%

CSS Code

background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);

Working with CSS gradients

CSS gradients are generated images, so they scale crisply and add zero network requests. linear-gradient blends colors along an angle, radial-gradient radiates from a center point, and conic-gradient sweeps colors around a center. Add as many color stops as you need, drag each stop's position, and copy production-ready CSS — all rendered live in your browser.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Building a linear or radial gradient with a live preview.
Getting the stop positions for a gradient a designer specified.
Producing a subtle background gradient without banding.
Comparing two gradient directions side by side.
Building a gradient overlay for text on an image.

How it works in practice

A worked example

A hero image needs a scrim so white text stays legible, and a flat dark overlay at forty percent is dulling the whole photograph.

Input

Type:   linear      Angle: 135°
Stops:  #0f172a at 0%, alpha 100
        #0f172a at 55%, alpha 55
        #0f172a at 100%, alpha 0

Output

background-image: linear-gradient(135deg, #0f172a 0%, rgba(15, 23, 42, 0.55) 55%, rgba(15, 23, 42, 0.00) 100%);

One colour, three opacities, and the far corner of the photograph comes back. The first stop stays hexadecimal because its alpha is 100 and there is nothing to add; the other two are emitted as rgba with identical channel values and a falling fourth number. That sameness is the whole trick — every stop is the same navy, so the ramp changes only how much of it there is and never drifts through some other hue on the way out. Read the numbers back and you can see the scrim is heaviest where the text sits.

The edge case that catches people

A fixed angle and the corner keyword are the same gradient only on a square. The keyword form is defined so that the gradient line lands where a perpendicular through it meets the corners, which means it re-aims itself as the box changes shape; degrees do not, so on a wide banner a 135-degree ramp arrives at the right-hand edge well before it reaches the bottom. This page emits degrees, which is the more predictable of the two and the wrong one if a designer handed you a corner-to-corner spec for an element whose proportions are fluid.

When not to use this tool

Radial output here is always a plain circle at the centre. The angle control greys out and there is no size or position argument, so an ellipse offset to thirty percent has to be written by hand afterwards. The syntax is legacy too, with no interpolation hint, and naming a perceptual interpolation space is the real fix for a midpoint that turns muddy between two saturated colours — so a ramp across the spectrum is one to write yourself rather than copy from here. What this is genuinely good for is settling stop positions and an alpha ramp quickly, which is most of the work.

Frequently Asked Questions

Which property does a gradient belong to?: `background-image`, not `background-color` — a gradient is a generated IMAGE. That is why it can be layered with other backgrounds, why it needs a sized box to paint into, and why `background-color` still shows through anywhere the gradient is transparent.
What is the difference between linear, radial and conic?: The direction of travel. Linear blends along a straight line at an angle; radial spreads outward from a centre point in circles or ellipses; conic sweeps around a centre like a clock hand, which is what makes it the one to use for pie charts and colour wheels rather than a soft blend.
How is the angle measured?: Clockwise from pointing up. `0deg` runs bottom to top, `90deg` runs left to right, and the common `135deg` runs from the top-left corner toward the bottom-right. This differs from the mathematical convention, and it is why a gradient sometimes runs the opposite way to what you expected.
Why does my gradient show visible bands?: Because 8 bits per channel gives 256 steps, and a gradient stretched across a wide area needs more distinct values than it has. Banding is worst on subtle blends between similar dark colours. Adding an intermediate colour stop, or a faint noise overlay, breaks up the edges the eye latches onto.
Why does fading to `transparent` go grey in the middle?: Because `transparent` is shorthand for `rgba(0,0,0,0)` — transparent BLACK — and older interpolation blends toward that black as the alpha falls. Fade to the same colour with zero alpha instead: `rgba(255,255,255,0)` rather than `transparent`.

Common errors and gotchas

Interpolating between two saturated colours in sRGB, which produces a grey or muddy midpoint.
Producing visible banding on a large, low-contrast gradient.
Using a gradient behind text without checking contrast at both ends.
Assuming a gradient renders identically everywhere, since interpolation space varies.
Forgetting a fallback background colour for contexts that do not render the gradient.