CSS Gradient Builder Reference

CSS linear-gradient() Function

CSS linear-gradient() draws color transitions along a straight axis. Defined in the CSS Images Module Level 4 specification, the function accepts an optional direction argument followed by two or more color stops.¹ Browsers render the gradient by interpolating between adjacent stops across the element's background area. The direction argument accepts either a keyword such as to right or to bottom left, or an angle in degrees. At 0deg the gradient flows from bottom to top; at 90deg it flows from left to right.² Yet the angle coordinate system differs from standard mathematics: CSS measures clockwise from the top rather than counter-clockwise from the right. Consequently, a value that appears diagonal in math notation points a different direction in a CSS gradient. The function is the most-used gradient type in CSS and the starting point for most UI backgrounds, hero overlays, and button hover states.

What is linear-gradient()?

Direction argument: keywords and angles

The direction argument controls which axis the gradient runs along. Using to right draws a left-to-right gradient; to bottom produces the default top-to-bottom sweep. Diagonal keywords combine two axes: to bottom right aims at the element's bottom-right corner, adapting the angle to the element's aspect ratio rather than fixing it at 135deg. Angle values accept degrees (180deg), radians (3.14rad), gradians (200grad), and turns (0.5turn). All four units resolve to the same angular position.

Angle versus keyword: which to use

Keyword directions are aspect-ratio-aware: to bottom right adjusts as the element resizes. Fixed degree angles remain constant regardless of element shape. Use keywords when the gradient should scale with the element's proportions, and use degrees when the visual angle must stay consistent across different element sizes, such as a button and a hero banner sharing the same gradient rule. For responsive layouts that reflow between portrait and landscape, keyword directions prevent the gradient from pointing in an unexpected orientation after a breakpoint switch.

Color stops and hint positions

Color stops define the colors and their positions along the gradient axis. A stop with no explicit position is placed automatically: the first stop defaults to 0%, the last to 100%, and intermediate stops distribute evenly between them. Explicit positions override the automatic distribution. Placing two stops at the same position creates a hard stop, which is a sharp edge between two colors with no blending.

The color hint

A color hint is a position-only value between two stops that shifts the midpoint of the transition. Placing a hint at 30% between two stops biases the blend toward the first color, reaching the midpoint at 30% instead of the mathematical center. Hints carry no color; they are bare percentage or length values.

Building on this, browsers interpolate in sRGB by default. Adding in oklch between the function keyword and the first stop switches interpolation to the OKLCH perceptual color space, eliminating the grey midpoint that appears between complementary hues in standard sRGB blending.³ The in oklch modifier applies to the entire gradient function and every stop transition within it, so a single declaration routes all blending through the perceptual color space without additional configuration.

Repeating linear gradients

The repeating-linear-gradient() variant tiles the defined stop pattern across the full element. The pattern length equals the distance from the first stop position to the last stop position, and the browser calculates the number of visible repetitions by dividing the element dimension along the gradient axis by this pattern length.⁴ Stops spanning 0% to 20% produce a stripe that tiles five times across the element's gradient axis. Hard stops at both ends of the tile pattern create clean edges with no color bleed between repetitions.

Composing with CSS custom properties

CSS custom properties work well alongside repeating gradients. Defining a stripeColor property and a stripeSize property keeps the gradient value readable while letting component-level or theme overrides control individual parameters. Consequently, a single background-image declaration adapts to token changes without rewriting the entire gradient function. Furthermore, repeating-linear-gradient() covers the majority of stripe and tick-mark patterns without any JavaScript, making it a complete CSS-only solution for most decorative background needs. Combining repeating-linear-gradient() with background-size gives independent control over the tile dimensions and the within-tile color sequence, which is useful when the same gradient pattern needs to appear at different scales across components. When you need the stripe pattern to respond to a user preference such as reduced motion or a dark-mode toggle, swapping the custom property values inside a media query or attribute selector changes the visual output without touching the gradient declaration at all.

Try in the tool

CSS radial-gradient() Function

A radial gradient begins at a focal point and expands outward in circular or elliptical paths. Defined in CSS Images Module Level 4, Section 3.2, the function draws either a circular or elliptical gradient starting at a center position and radiating toward the element edges.¹ The first argument is optional and controls the gradient's shape, size, and position. Without any arguments, the browser renders an ellipse centered on the element that extends to the farthest corner.²

Yet shape, size, and position each accept separate keywords and values, giving precise control over how far the gradient reaches and where it originates. Consequently, radial gradients suit spotlight effects, soft glows, and circular highlight animations that linear gradients cannot express. For UI work, this makes radial gradients useful whenever depth needs to feel anchored to a point rather than an axis, especially around buttons, cards, and spotlight hero areas. Building on this, the function composes with other background-image values using comma separation, allowing layered radial gradients on the same element.

What is radial-gradient()?

Shape and size keywords

The shape keyword selects circle or ellipse. A circle maintains equal radii on all axes regardless of element proportions; an ellipse adapts to the element's width and height. Omitting the shape keyword defaults to ellipse. The shape you choose affects how the gradient interacts with the element's aspect ratio: a circle stays round on any element, while an ellipse stretches to fill the available space.

The size keyword controls how far the gradient extends from the center. farthest-corner (the default) reaches the farthest corner of the element, ensuring full coverage regardless of position. closest-side stops at the nearest edge, creating a more compact gradient that does not reach the corners. farthest-side and closest-corner offer additional options for specialized layouts where the gradient needs to stop before or beyond the element's natural boundaries.

Explicit length sizes

Providing explicit pixel or percentage dimensions overrides the keyword size. For a circle, supply a single length: circle 80px. For an ellipse, supply two values: ellipse 60px 40px. Percentage values resolve against the element's width for the horizontal radius and height for the vertical radius. Consequently, percentage sizes adapt to the element's dimensions at layout time rather than fixing the gradient at a specific pixel value.

Position argument

The at keyword positions the gradient center, giving you precise control over where the radial gradient originates within the element's bounding box. Without it, the gradient centers at 50% 50%. Adding at top left moves the focal point to the upper-left corner. At 75% 25% places it three-quarters across and one-quarter down the element. The position argument accepts any CSS position syntax: keywords (top, center, bottom, left, right), percentages, pixel lengths, and two-value combinations.

Off-center gradients for spotlight effects

Moving the gradient center off-center produces a directional spotlight feel. A radial gradient at 20% 80% with a tight size creates a focused light source in the lower-left area. Furthermore, multiple radial gradients with different centers stack via comma-separated background-image values, layering several spotlights on the same element without any JavaScript. Building on this, animating the position with CSS custom properties and @property registration moves the light source across the element in a smooth transition. The at keyword accepts calc() expressions for positions that depend on element dimensions, enabling gradients that adapt their focal point as the element resizes across breakpoints. This responsive positioning capability means a single radial gradient declaration can serve both mobile and desktop layouts without duplicating the background-image value across breakpoint-specific rules.

Repeating radial gradients

The repeating-radial-gradient() variant tiles the stop pattern outward from the center, producing concentric rings that repeat at regular intervals determined by the stop positions.³ The tile length equals the distance from the first stop to the last stop position, and the browser divides the remaining radial distance by this length to determine how many rings fit between the center and the element edge. Hard stops at both ends of the tile produce clean ring boundaries with no blending between repetitions.

Concentric ring patterns

Hard stops at 0% and 50% of a small stop pattern produce concentric ring stripes outward from the center. Adjusting the size keyword changes how many rings appear before the gradient reaches the element edge. Yet repeating radial gradients can alias at high magnification: rings become jagged near the outer edges where each ring is wider in pixel terms. Furthermore, setting a transparent stop at the tile boundary softens the alias at the cost of slightly blurred ring edges. Combining repeating-radial-gradient() with background-size controls the visible tile count independently of the stop positions. For ring patterns that need to remain crisp at all zoom levels, increasing the tile length and using background-size to scale the pattern prevents the aliasing artifacts that appear when individual rings become only a few pixels wide.

The concentric ring approach also works well as a loading indicator or progress visualization, where animating the background-position or the from angle creates a pulsing or rotating ring effect that draws attention without requiring any additional DOM elements or JavaScript. Beyond loading spinners, repeating radial gradients serve as subtle focus rings around interactive elements, as backdrop textures behind modal dialogs, and as radial highlight overlays that guide a user's eye toward a specific region of the page. Because the pattern repeats predictably, you can pair it with CSS keyframe animations that shift the background-position by exactly one tile length, producing a seamless infinite loop without any visible jump between cycles.

Try in the tool

CSS conic-gradient() Function

Color sweeps around a fixed center point in a conic gradient, rather than traveling along an axis or radiating outward from a focal point. Defined in CSS Images Module Level 4, Section 3.3, the function starts a color transition at a specified angle and rotates it around the center until the sweep completes the full 360 degrees.¹ The optional from argument sets the starting angle; the optional at argument positions the center. Without either, the sweep starts at the top (0deg) and centers at 50% 50%.²

Conic gradients differ fundamentally from linear and radial types: rather than transitioning from one point to another, the color travels angularly around a fixed center. Consequently, they produce pie-chart slices, color wheels, starburst patterns, and spinner animations that neither linear nor radial gradients can express. Use this function when the design needs circular progress, segmented badges, or a radial color wheel rather than a directional wash. Building on this, hard stops at percentage boundaries create flat-color segments for data visualization.

What is conic-gradient()?

from angle and at position arguments

The from argument rotates the sweep start: from 90deg begins the first color at the right side of the element rather than the top. The from value accepts degrees, radians, gradians, and turns. Combining from with at repositions the center: conic-gradient(from 45deg at 25% 75%, ...) starts the sweep at 45deg and centers it in the lower-left quadrant.

Stop positions as angles and percentages

Color stops in conic gradients accept both percentage and angle values. A stop at 25% equals 90deg into the rotation; a stop at 0.5turn equals 180deg. Mixing percentage and angle values in the same gradient is valid but requires care: the browser converts all values to degrees before comparing positions. Building on this, the from angle shifts the zero reference for percentage stops, so 25% always means a quarter of the full rotation regardless of where the sweep starts.

Because percentage stops are always measured from the from angle, the same stop list rotates cleanly when you change only the starting rotation. A dashboard that shows several conic badges pointing in different directions can reuse one percentage definition and vary the from value per badge, keeping the segment math identical across all of them. CapyToolkit's gradient builder previews the rotated result so you can confirm the segments land where you expect before copying the CSS.

Pie chart slices with hard stops

Pie charts require hard stops at exact percentage boundaries. A two-segment chart splits at 40%: the first color runs from 0% to 40%, the second from 40% to 100%. Hard stops place two adjacent stops at the same position, one for each color. The two-position stop shorthand introduced in CSS Images Level 4 simplifies this pattern by letting you write a single stop with two positions instead of two separate stops at the same coordinate.

Calculating segment angles

Each segment covers a percentage equal to its value divided by the total. A pie chart showing 40%, 35%, and 25% uses three hard-stop pairs: first color at 0% and 40%, second at 40% and 75%, third at 75% and 100%. The from argument rotates the entire chart without changing the relative segment sizes. Consequently, rotating the chart to start the largest segment at the top requires computing the starting angle from the first segment's midpoint. Furthermore, adding a subtle outline effect uses a box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1) on the element rather than per-segment borders. For pie charts with many segments, generating the stop list programmatically from a JavaScript array of values keeps the CSS in sync with the underlying data and avoids manual percentage calculations.

Repeating conic gradients for patterns

The repeating-conic-gradient() variant tiles the stop pattern repeatedly around the center until the full 360-degree arc completes, and the browser calculates the number of tile repetitions by dividing 360 by the angular span of the stop pattern.³ A pattern covering 0% to 25% tiles four times. Hard stops at 0% and 12.5% of the tile, followed by a contrasting color at 12.5% and 25%, produce a checkerboard when the element is square.

Pinwheel and starburst patterns

Combining a narrow colored sector with a transparent sector in the repeating variant produces a pinwheel. Increasing the sector count by reducing the pattern arc length adds more spokes. Yet very narrow sectors alias at the center point where the gradient origin converges; adding a small circle clip or a centered overlay hides the aliased center. Furthermore, animating the from angle with a @keyframes rotation produces a spinning animation that runs entirely in CSS, making it suitable for loading indicators with no JavaScript dependency. The two-value stop syntax (black 0deg 90deg) reduces the number of declarations needed for each sector by half, which matters when building complex multi-spoke patterns with many alternating color stops. Combining repeating-conic-gradient() with a subtle box-shadow and a centered overlay element transforms the raw pinwheel into a polished loading spinner that looks intentional rather than like a geometric artifact.

Try in the tool

CSS repeating-linear-gradient() Function

Repeating linear gradients turn a short stop pattern into a seamless tiled background that covers any element size. Defined in CSS Images Module Level 3, Section 3.4, the function shares its syntax with linear-gradient() but extends the stop pattern from the first stop position to the last stop position and repeats that segment indefinitely across the gradient axis.¹ The pattern length is not fixed to the element size: it equals the distance between the first and last stop positions as specified.

Consequently, a pattern from 0px to 20px tiles at 20-pixel intervals regardless of how wide or tall the element is. Yet because the repetition is infinite in both directions from the center of the gradient line, the pattern always aligns perfectly with itself.² This makes the function ideal for ruled backgrounds, measurement grids, and striped accents that need exact spacing without an image asset. Building on this, hard stops at pattern boundaries produce clean-edged stripes without any anti-aliasing artifacts at the tile seams.

What is repeating-linear-gradient()?

Tile size calculation from stop positions

The repeating tile length equals the last stop position minus the first stop position.⁴ Stops at 0px and 20px produce a 20px tile. Stops at 0% and 10% produce a tile that is 10% of the gradient line length, which depends on the element size and gradient angle. Using pixel lengths gives consistent tile sizes across different element sizes; percentage values produce tile sizes that scale with the element.

Auto-distribution does not apply

In regular linear-gradient(), omitting stop positions distributes them evenly. In repeating-linear-gradient(), all stops must have explicit positions.³ Omitting positions causes undefined behavior where browsers disagree on the interpretation. Providing explicit positions for every stop is required for cross-browser consistency. Consequently, the minimal valid repeating pattern requires at least two stops, each with an explicit position value. Building on this, positions in length units (px, rem) are more predictable for stripe widths than percentages, which vary with element size.

Because the tile is defined purely by stop positions, changing only the direction keyword reorients the entire stripe set without altering the widths. A component that needs vertical rules in one layout and diagonal rules in another can swap to right for 45deg and keep the same pixel stops. CapyToolkit's gradient builder shows the resulting tile so you can confirm the spacing before pasting the pattern into a stylesheet.

Hard-stop stripe patterns

Two pairs of hard stops produce a two-color stripe. One color occupies the first half of the tile and the second color occupies the second half, with sharp edges at both transitions. The hard stop places two adjacent stops at the same position, one for each color: repeating-linear-gradient(to right, blue 0px, blue 10px, orange 10px, orange 20px).

Anti-aliasing at diagonal stripe edges

Diagonal stripes with hard stops show a one-pixel jagged edge at sharp angles on sub-pixel displays.⁵ Softening the transition by adding a small overlap of one or two pixels between the hard stops blurs the edge slightly but eliminates the aliasing artifact. A one-pixel transition instead of a hard stop: replace orange 10px with orange 9px, then start the next color at 11px. Yet this technique slightly reduces the sharpness of the stripe edge. Furthermore, the aliasing is only visible at angles and on high-dpi displays; horizontal and vertical stripes with hard stops remain sharp at all resolutions.

Combining with background-size

The background-size property controls the element area the gradient fills before tiling. Setting background-size: 40px 40px makes the gradient tile at 40-pixel intervals independently of the stop positions. Combining repeating-linear-gradient() with background-size provides two independent controls: the gradient defines the within-tile color sequence and the background-size defines how large each tile appears on screen.

Diagonal grid patterns

A 45deg repeating stripe combined with background-size and a second perpendicular stripe creates a diagonal grid. Two background-image values in the comma list layer the stripes, with each using a complementary angle. Consequently, a full grid background requires only CSS with no SVG or image assets. Furthermore, using CSS custom properties for stripe width and color keeps the pattern configurable at the component level without modifying the gradient declaration directly.

Try in the tool

CSS repeating-conic-gradient() Function

When a conic stop pattern tiles repeatedly around a full 360-degree sweep, the result is a repeating conic gradient. Defined in CSS Images Module Level 4, Section 3.4, the function extends conic-gradient() by repeating the stop segment from the first stop position to the last stop position until the sweep reaches 360 degrees.¹ The tile arc length equals the angular span of the stop pattern.

Consequently, a pattern spanning 0deg to 90deg tiles four times around the center. Hard stops within the pattern produce sharp sector boundaries between repetitions, enabling checkerboard, pinwheel, starburst, and pie-chart-tick patterns that no other CSS gradient type produces. The function is especially useful when a design needs radial repetition without an SVG background, because the browser calculates sector counts from the stop positions. Building on this, the from and at arguments work identically to conic-gradient(), controlling the starting angle and center position.² The from argument rotates every tile instance by the same offset, which is useful for aligning a checkerboard pattern with the element's visual center or an existing design grid.

What is repeating-conic-gradient()?

from/at arguments and tile arc length

The from argument rotates the start of the repeating pattern. from 45deg begins the first stop at 45 degrees clockwise from the top, rotating every tile instance by the same offset.³ The at argument moves the center position just as in conic-gradient(). Together these two arguments control where the pattern starts and where it pivots, giving you full control over the rotational alignment of the tiled result.

Calculating tile count

The tile arc length determines how many repetitions fit in the 360-degree sweep. A pattern from 0deg to 60deg tiles six times. A pattern from 0% to 25% tiles four times. Percentage values convert to degrees: 25% equals 90deg. Mixing percentage and degree values is valid; the browser converts all values to degrees before tiling. Building on this, the from argument shifts the tile start without changing the tile count, which is useful for aligning a checkerboard pattern with the element's visual center or an existing design grid.

Checkerboard with two 90-degree hard stops

A checkerboard requires two alternating colors in equal sectors. Using a 90-degree tile with two hard stops produces four sectors: two of each color alternating around the center. The pattern: repeating-conic-gradient(black 0deg, black 90deg, white 90deg, white 180deg). This tiles twice across the 360-degree arc, creating four equal quadrants alternating black and white. The two-value stop shorthand (black 0deg 90deg) reduces the checkerboard declaration from four stops to two,⁴ making the pattern easier to read and maintain in production stylesheets where verbose gradient declarations add cognitive overhead during code reviews and future edits.

Square element requirement

The checkerboard pattern appears geometrically square only when the element's width equals its height. On non-square elements, the sectors are elliptical segments rather than rectangular blocks. Use aspect-ratio: 1 on the element to enforce a square shape. Consequently, a perfectly tiled checkerboard needs both the gradient pattern and the element's aspect ratio to be controlled.

Scaling the tile count by using a 45-degree pattern instead of 90 degrees produces eight sectors, which looks like a finer grid when the element is large. The two-value stop shorthand (black 0deg 90deg) reduces the checkerboard declaration from four stops to two, making the pattern easier to read and maintain in productions stylesheets. Furthermore, a 45-degree tile gives you more flexibility in adjusting the visual density of the checkerboard without rewriting the stop positions.

Animated spinner pattern with @keyframes rotate

Combining repeating-conic-gradient() with a CSS rotation animation produces a spinner that runs entirely in CSS. The gradient provides the visual pattern: a narrow colored sector followed by a transparent sector of the same arc length. Animating the element's transform: rotate() with @keyframes spins the pattern around the center. A practical pattern for production spinners uses a single colored sector against a transparent background sector of equal arc length, which gives the browser the simplest possible texture to composite at high frame rates while still producing a visually effective rotation animation on both desktop and mobile screens.

Performance and GPU compositing

CSS transform animations run on the GPU compositor in modern browsers, separate from layout and paint.⁵ Rotating an element with a conic gradient background does not trigger layout recalculation or repaint. Yet the gradient itself renders as a texture on first paint and is cached for the animation duration. Consequently, complex multi-stop conic gradients used as spinner backgrounds may consume more GPU memory than simpler patterns.

Clipping the spinner to a circle using border-radius: 50% hides the square element corners and reduces the visible pattern area, which can improve perceived quality for pinwheel spinners.⁵ For loading spinners that need to run continuously without draining battery on mobile devices, limiting the gradient to two or three stops keeps the texture size small and reduces GPU memory pressure during the animation.

A practical pattern for production spinners uses a single colored sector against a transparent background sector of equal arc length. This two-stop approach gives the browser the simplest possible texture to composite at high frame rates. Pair the gradient with a thin border ring drawn via border and box-shadow so the spinning indicator reads as a cohesive circular widget rather than a flat colored wedge, and prefer using a CSS custom property for the sector color so the spinner can adapt to light and dark themes without duplicating the entire gradient declaration across media queries.

Try in the tool

CSS Gradient Color Stop Syntax

Controlling where each color appears and how the transition behaves around it is the role of the CSS color stop. Defined in CSS Images Module Level 4, Section 2, a color stop combines a color value with one or two position values.¹ The position controls where the stop sits on the gradient axis. Without an explicit position, the browser distributes stops automatically.²

Positions accept percentages, length units such as px and rem, calc() expressions, and angle values for conic gradients. Two positions on a single stop create a solid-color band with no blending.³ Between any two stops, a color hint shifts the midpoint of the transition without adding a new color. Consequently, color stop syntax determines not just what colors appear but precisely how the gradient accelerates, decelerates, and transitions across the element. Building on this, the interpolation color space keyword modifies how the browser blends between stops.

What is <color-stop>?

Position syntax: %, px, calc(), and two-position shorthand

Percentage positions resolve against the gradient line length at layout time. A stop at 50% always lands at the midpoint of the gradient regardless of element size. Pixel positions are absolute: a stop at 40px sits 40 pixels from the gradient start. rem positions scale with the root font size, which links gradient stop spacing to the typographic rhythm of the layout. Each unit type serves a different purpose: percentages adapt to the container, pixels give fixed placement, and rem units tie the gradient to the document's type scale.

calc() for computed positions

calc() combines units: calc(50% - 20px) places a stop at the center minus 20 pixels. This is useful for centering a gradient band that must align with an element of known pixel width within a fluid container. You can also combine calc() with viewport units, such as calc(100vw / 3), to position gradient stops at fractional viewport boundaries that shift as the browser window resizes, keeping the gradient layout proportional across all screen sizes without any media query breakpoints.

The two-position shorthand places one stop at both positions: blue 20% 60% is equivalent to blue 20%, blue 60%. The browser renders solid blue from 20% to 60% with no blending in that range. Building on this, hard stops use the two-position shorthand when writing checkerboard or stripe patterns, as it halves the number of stop declarations required.

Color hints and how they shift the midpoint

A color hint is a bare position value between two color stops with no color of its own. The hint shifts where the browser places the midpoint of the interpolation between the two adjacent stops.⁴ Without a hint, the midpoint of any transition sits at the mathematical center between the two stop positions. Placing a hint at 30% between a stop at 0% and a stop at 100% moves the midpoint to 30%, biasing the transition toward the first color.

When to use hints

Color hints accelerate or decelerate gradient transitions visually. A hint placed close to the first stop creates a fast initial transition that slows near the second stop. Conversely, a hint near the second stop creates a slow build followed by a rapid end. Yet hints cannot produce non-monotonic transitions: the gradient still moves from the first color to the second in one direction.

Furthermore, hints are not visible in CSS output as a named feature; they appear as a bare length or percentage between two stop values, which can be easy to overlook when reading compressed CSS. For UI work where the gradient transition speed needs to match a specific animation curve, placing hints at 25% or 75% creates a pronounced easing effect that mimics a CSS ease-in-out timing function applied to the color blend itself.

Multi-position stops and the hard-stop pattern

The CSS Images Level 4 specification defines a shorthand for hard stops using two positions on a single color. Writing red 40% 60% places a solid red band from 40% to 60% with no gradient transition in that region.³ Before 40% and after 60%, the browser blends normally with adjacent stops. The two-position form makes the intended hard boundary visually obvious in the source code, which reduces the cognitive load of parsing a gradient that has many stops at seemingly duplicate positions.

Hard stop as two separate stops

Before the two-position shorthand existed, hard stops required two separate stops at the same position: red 50%, blue 50%. Both patterns remain valid. The shorthand reduces repetition and makes stripe patterns easier to read. Building on this, combining the two-position shorthand with repeating-linear-gradient() produces stripe patterns with minimal code. A two-color stripe: repeating-linear-gradient(to right, blue 0px 20px, orange 20px 40px). Consequently, the two-position stop is the primary tool for geometric patterns in CSS without any images or JavaScript, and understanding both the longhand and shorthand forms helps when auditing gradient values in legacy codebases that predate the Level 4 specification.

When you encounter a gradient with many stops at identical positions in older stylesheets, recognizing the hard-stop pattern helps you determine whether the gradient was intended to produce sharp color bands or whether the duplicate positions are accidental and should be smoothed into a continuous transition. Refactoring legacy hard-stop gradients to use the two-position shorthand improves readability without changing the visual output, making future maintenance easier and reducing the chance of accidental stop reordering during edits.

Try in the tool