CSS Gradient Generator

Stops{{ computation.ok ? values.stop_count : '—' }} Blend{{ computation.ok ? values.color_space_label : '—' }} Output{{ computation.ok ? values.output_label : '—' }}

Gradient type:

Choose the CSS gradient function and its geometry controls.

Gradient angle:

{{ formatNumber(angle) }}°

Use the slider for exploration and the number field for exact CSS geometry.

Gradient angle in degrees

deg

Gradient center:

Move the radial or conic origin without changing the stop sequence.

% X% Y

Radial shape and extent:

Farthest corner is the broadest common default.

Conic start angle:

{{ formatNumber(conic_angle) }}°

This value becomes the CSS from angle.

Code format:

The generated artifact and copy action update with this target.

Color stops:

Drag, nudge, recolor, reorder, add, or remove stops. Alpha is exported as rgba() when below 100%.

Stop	Color	Position	Alpha	Actions
{{ index + 1 }}	{{ `Pick stop ${index + 1} color` }}{{ `Stop ${index + 1} hex color` }}	{{ `Stop ${index + 1} position` }} %	{{ `Stop ${index + 1} alpha` }} %

Color interpolation:

Browser default emits no explicit interpolation clause; choose a modern space only when target-browser support is acceptable.

Selector:

Example: .hero-gradient. Braces and semicolons are rejected.

Token name:

Use letters, digits, underscores, and hyphens without the leading -- or $.

CSS property:

The neutral default is background-image.

Repeating gradient:

Keep this off for a single transition. Repeating gradients require a positive stop span.

{{ values.css_code }}

Stop	Color	Position	Alpha	CSS fragment	Copy
{{ row.label }}	{{ row.color }}	{{ row.position }}%	{{ row.alpha }}%	{{ row.fragment }}

A CSS gradient is an image generated from geometry and color stops. It scales with the painted box, so the same stylesheet value can cover a button, card, banner, or full viewport without exporting a fixed bitmap.

Three gradient families describe different paths through the box. Linear gradients move along a line, radial gradients expand from a center through a circle or ellipse, and conic gradients sweep around a center. The colors can stay identical while a change in geometry produces a completely different visual structure.

Linear: Use an angle for directional fades, surface lighting, and bands.
Radial: Use a center, shape, and extent for highlights, glows, and vignettes.
Conic: Use a center and start angle for wheels, rings, and sweep effects.

Color stops anchor exact colors at exact positions. Moving two neighboring stops closer compresses the transition; giving two stops the same position creates a hard boundary. Alpha belongs to each stop, so the result also depends on the background painted behind the gradient.

Interpolation controls the colors between stops. Browser-default interpolation gives familiar compatibility, while spaces such as OKLab or OKLCH can produce different midpoints and hue paths. A visually smoother blend in one browser is not enough evidence for release: support and fallbacks still need to match the target browser set.

Gradients are often decorative, but text contrast can vary across every point in the image. Check the final component at its real size and background, and do not rely on the preview alone for accessibility or browser compatibility.

How to Use This Tool:

Define the path first, place the stops second, and choose the code wrapper after the visual recipe is stable.

Select Linear, Radial, or Conic. Set the angle for a linear gradient, or the center and type-specific geometry for radial and conic gradients.
Edit two to ten color stops. Use the rail for quick movement and the row fields for exact six-digit HEX colors, positions from 0% to 100%, and alpha from 0% to 100%.
Keep stop positions in ascending order. If validation reports an order error, use Sort by position or correct the percentages before copying the CSS.
Choose a color-interpolation space only when the target browsers support its syntax. Leave Browser default selected for the most conservative output.
Select the CSS property and code format, then copy the result and test it on the real component. A repeating gradient also needs the final stop to be later than the first.

Interpreting Results:

The generated gradient value is the exact paint recipe. Use the preview for overall appearance, then check the stop positions and alpha values for the cause of any compressed band, abrupt seam, or unexpected transparency. Average alpha is a simple mean of the stop values; it is not a measurement of the opacity across the rendered image.

Gradient result checks
Symptom	Likely cause	Check
Hard stripe	Adjacent stops share or nearly share a position	Increase the distance between their percentages.
Visible conic seam	First and last colors do not meet cleanly	Compare colors at the start and end of the sweep.
Unexpected background showing through	One or more stops have alpha below 100%	Test over the production background.
Declaration ignored	Unsupported interpolation syntax or output wrapper	Test the exact value with the target browser and add a fallback.

Technical Details:

A gradient value combines a function name, geometry, optional interpolation clause, and ordered stop list. The function gains a repeating- prefix when repetition is enabled. Each stop is emitted as a color followed by its percentage position.

Transformation Core

CSS gradient geometry serialization
Type	Serialized geometry	Meaning
Linear	`angledeg`	CSS angles rotate clockwise; 0° points up and 90° points right.
Radial	`shape extent at X% Y%`	The circle or ellipse reaches the selected side or corner from the center.
Conic	`from angledeg at X% Y%`	The sweep begins at the selected angle around the center.

When alpha is 100%, a stop keeps its six-digit HEX color. Lower alpha is converted to rgba(red, green, blue, alpha), with alpha written from 0 to 1 at up to two decimal places. Positions and geometry values are also rounded to at most two decimals.

An explicit interpolation choice adds an in color-space clause after the geometry. Supported choices are sRGB, linear sRGB, Display P3, Lab, LCH, OKLab, OKLCH, HSL, and HWB. Browser default omits the clause entirely.

Formula Core

Two summary metrics describe the entered stops without attempting to model every pixel in the rendered gradient.

\begin{matrix} Stop span & = & p_{last} - p_{first} \\ Average alpha & = & \frac{\sum_{i = 1}^{n} a_{i}}{n} \end{matrix}

Positions p and alpha values a are percentages. Both metrics are rounded to two decimal places. Average alpha weights every stop equally, regardless of the distance to its neighbors.

Validation Rules

Angles are accepted from 0° to 360°, inclusive; center coordinates use 0% to 100%.
Each recipe requires 2 to 10 stops with six-digit HEX colors.
Stop position and alpha must each be 0% to 100%, inclusive.
Positions must be in ascending order even though CSS itself has fixup rules for backward positions.
A repeating recipe requires a positive span, so the last position must be greater than the first.

The same gradient value can be wrapped as a selector rule, declaration, CSS custom property, @layer utility, SCSS variable, or Tailwind arbitrary utility. Wrapper choice does not change the geometry or stops. Selector text rejects braces and semicolons; token names retain only letters, digits, underscores, and hyphens.

Worked Examples:

Three-stop diagonal blend

A 135° linear gradient with blue at 0%, violet at 46%, and teal at 100% gives the violet less than half of the transition line before teal takes over. Moving the middle stop toward 70% holds the blue-to-violet blend longer and compresses the final transition.

Transparent radial spotlight

An elliptical radial gradient centered at 30% 40% can begin with opaque white and end with black at 50% alpha. The final stop is emitted as RGBA, so the apparent edge depends on the element’s background rather than on black alone.

References:

CSS Images Module Level 4, W3C.
CSS Color Module Level 4, W3C.
How to add CSS feature-query fallbacks, Simplified Guide.