Generate a CSS linear or radial gradient

Create a reusable CSS gradient without manually assembling punctuation or wondering whether each stop is in the right place. Choose a linear or radial gradient, provide its direction or shape, and add at least two ordered color stops. Each stop can contain a CSS color and an optional position. The result is a single deterministic gradient value ready for a background-image declaration, a design token, a stylesheet, or application code. Invalid types, descriptors, positions, and incomplete stop lists are rejected with clear input errors.

Choose the gradient family and its geometry

Begin with the visual behavior you need. A linear gradient moves along an axis, so its descriptor should be a CSS angle such as 135deg or a keyword direction such as to right, to bottom, or to top left. A radial gradient expands outward from a point.

Its descriptor can name circle or ellipse, optionally add a sizing keyword such as closest-side or farthest-corner, and optionally set an origin after at, for example circle at center or ellipse farthest-corner at 25% 40%. The generator checks the descriptor against the selected family instead of blindly joining arbitrary fragments. That catches mistakes such as supplying a radial shape to a linear gradient before the value reaches a stylesheet.

It also prevents commas and declaration-breaking characters from being hidden in the geometry. Choose linear when the transition should have a clear travel direction, and radial when the design should radiate from a focal point.

Build an ordered list of color stops

Add color stops in the exact order in which they should appear in CSS. Every stop requires a color, and the complete gradient requires at least two stops because a transition cannot exist with only one color. Colors may use familiar CSS forms such as named colors, hexadecimal values, rgb(), hsl(), or modern space-separated functional notation.

A stop position is optional. When omitted, the browser distributes unspecified stops according to CSS gradient rules. When included, it must be one or two CSS lengths or percentages, such as 0%, 12px, or 30% 45%.

Two positions create a hard color band using the same color at both boundaries. The generator preserves the order you provide; it does not sort positions or reinterpret the palette, because intentionally descending or overlapping stops can produce useful sharp transitions. Parentheses are checked for balance, and unsafe declaration characters are rejected.

This validation keeps the result predictable while leaving color selection and artistic intent under your control.

Use the generated value in CSS and automation

Assign that value to background-image, or to the background shorthand when no other background layers need to be preserved. You can also store it in a custom property such as --hero-gradient and reference the token across components. Because the capability performs only deterministic validation and string assembly, the same input always produces the same spacing and output.

That stability is useful for code generation, snapshot tests, theme builders, and content systems that compare generated values byte for byte. No network request, random choice, model inference, or clock value affects the result. When integrating the output, remember that this tool generates the gradient image value rather than a complete CSS rule: your application decides the selector, property, fallbacks, sizing, and any solid background color needed for older or constrained environments.