Can I set a radial or conic gradient's center to a custom position, like 25% 75%, instead of one of the preset positions?

Not through this tool's Position dropdown, it's limited to nine fixed keywords, center plus the four sides and corners. CSS itself accepts an arbitrary percentage or length for a gradient's center position; edit the at center part of the copied CSS by hand if you need one of those.

What happens if I type a stop position below 0% or above 100% directly into the number field?

It's passed straight through to the generated CSS with no clamping, the slider's 0-100 range is a UI convenience, not an enforced limit. A color stop outside 0-100% is valid CSS; it shifts where that color reaches full strength relative to the other stops rather than being ignored or capped.

CSS Gradient Generator: Linear, Radial & Conic Gradients Online

Angledeg

Color stops

Presets

CSS

background: linear-gradient(90deg, #ff3d8f 0%, #7c3aed 100%);

Linear, radial, and conic gradients

All three accept the same list of color stops — only the direction the color travels changes.

LinearTransitions along a straight line at a given angle

RadialRadiates from a center point, as a circle or ellipse

ConicSweeps around a center point like a color wheel

What a color stop is

A color stop is a color plus a position (0-100%) along the gradient. Two stops is the minimum for any gradient; adding more lets you build multi-color transitions. The browser blends smoothly between each consecutive pair of stops.

Using the generated CSS

The output is a full background declaration — paste it directly into a CSS file or a style attribute. Gradients are valid anywhere a color or image value is accepted (background, border-image, mask), and render with no images or extra HTTP requests.

Frequently asked questions

Each new stop is placed 10 percentage points past the current furthest stop, capped at 100%. Once a stop is already at 100%, every stop you add after that also lands at exactly 100%, stacking several stops on top of each other at the same position instead of spreading out automatically.