CSS Gradient Generator

The angle sets the direction a linear gradient travels. 0deg goes bottom to top, 90deg goes left to right, 180deg top to bottom, and 270deg right to left. Values in between give diagonals — 45deg runs toward the top-right corner.

A radial gradient spreads outward from a centre point in concentric rings rather than along a straight line, so there is no single direction to angle. This tool generates a circular radial gradient, where the first colour sits at the centre and the last reaches the edge.

Yes. Use the Add colour button to insert extra stops, up to five. Each stop has its own position, so you can place a third colour at 50% to create a distinct middle band or an uneven blend.

It sets where along the gradient a colour is fully itself. Two stops at 0% and 100% spread the blend across the whole element. Moving a stop to 20% compresses that colour into the first fifth and stretches the transition to the next colour across the rest.

The colour picker here works in solid hex, but you can edit the copied CSS by hand to use rgba() or an 8-digit hex with an alpha channel, for example rgba(0,0,0,0) as one stop. Fading a colour to transparent is a common way to overlay a gradient on a photo.

Not for current browsers. Unprefixed linear-gradient() and radial-gradient() have been supported for years across Chrome, Firefox, Safari and Edge. You would only add -webkit- prefixes if you must support very old mobile Safari or similar legacy engines.

The most common causes are applying it to an element with no height or width, or having another background rule override it. Make sure the element has size, that this background declaration is not being overwritten later in the cascade, and that the property is background or background-image.

A CSS gradient is drawn by the browser from a text rule, so it is tiny, always sharp at any size, and easy to tweak. An exported PNG or JPG is a fixed-resolution file that adds a download and can look blocky when scaled. For flat colour blends, CSS is almost always the better choice.

This tool outputs the shorthand background property, which is fine on its own. If an element already has a background colour you want to keep as a fallback, use background-image for the gradient instead so the colour stays underneath.

No. They are cheap to render and add no network requests. Very large gradients that animate on every frame can cost a little on low-end devices, but a static background gradient has no meaningful performance impact.

Browsers cannot smoothly transition between gradient definitions the way they do with a solid colour. To animate one, people usually make an oversized gradient and shift its background-position, or fade between two stacked layers. The static CSS from this tool is your starting point.

Visible steps between colours usually come from too small a colour difference over too many pixels, or a low-bit display. Placing stops closer together or choosing colours with more contrast reduces the effect; there is no way to fully avoid it on some screens.

No. The gradient is built entirely in your browser from the controls on the page. No colours, code or images leave your device.