Design the transition, not just the endpoints

The Gradient Studio workflow

1. Compose: choose the gradient type, interpolation space, and direction.
2. Build the transition: add, duplicate, remove, or drag color stops.
3. Refine: compare sRGB, OKLab, and OKLCH using the same colors and positions.
4. Preview: review the gradient as a full canvas, behind an interface, and behind large typography.
5. Check placement: inspect sampled black- and white-text coverage across the transition.
6. Hand off: save, share, copy CSS, or download JSON and SVG.

Use all three preview contexts

The preview is not an export template. It is a decision tool for exposing problems that a small swatch cannot show.

Choose the type and direction

Gradient types

• Linear: color moves along a straight line. Use the direction control to set the visual path.
• Radial: color expands outward from the center. Direction controls are hidden because they do not apply.
• Conic: color rotates around the center. Direction sets the starting rotation.

Direction presets

The eight arrow buttons select common 45-degree directions. The range control remains available for exact values from 0 through 360 degrees.

Build the transition on the stop rail

Every stop combines a color and a position. The colored markers above the editor represent the same stops as the detailed rows below.

• Drag a marker left or right to change its position.
• Focus a marker and use the arrow keys for one-percent adjustments.
• Hold Shift while pressing an arrow key for five-percent adjustments.
• Use Home or End to move a focused marker to 0% or 100%.
• Edit the color through the native color picker or exact hex field.
• Edit position through the slider or percentage field.
• Duplicate a stop when you need an abrupt boundary or a related transition.
• Remove stops until only the required minimum of two remains.

Add stop places a new interpolated color inside the largest gap, where it provides the most useful additional control. A gradient supports up to eight stops.

Use creative actions without losing control

Inspire me

This action generates a considered direction from the active header color. Successive clicks cycle through balanced linear, colorful OKLCH, radial glow, and conic directions. It changes the complete gradient intentionally and can be undone.

Add active color

The active header color is inserted into the largest available stop gap. Existing type, direction, interpolation, and stop colors remain intact.

Reverse

Reverse mirrors all stop positions. The same colors and spacing remain, but the gradient travels in the opposite direction.

Distribute evenly

This keeps the current stop order and colors while spacing every stop evenly between 0% and 100%.

Undo and redo

Gradient Studio keeps an in-page history of editing changes. Undo and redo include stop changes, direction, gradient type, interpolation, generated directions, reverse, and distribution.

Compare interpolation before choosing it

The Refine section renders the same stops through all three supported spaces. Select a comparison card to apply it.

HexCheck computes the readability samples and exported SVG approximation using the selected interpolation space. For CSS exports using OKLab or OKLCH, an sRGB declaration is included first as a fallback.

Understand the placement check

Gradient Studio samples eleven points from 0% through 100% using the selected interpolation space. It calculates black- and white-text contrast at each sample and reports:

• The percentage of sampled points meeting 4.5:1.
• The lowest sampled contrast ratio for black text.
• The lowest sampled contrast ratio for white text.
• A recommendation to use black, white, or a solid text surface or overlay.

Understand persistence and shared links

Automatic workspace restoration

Gradient Studio remembers type, direction, interpolation, colors, and positions for the current account. Signed-out work remains local to the browser.

Additive color links

?add= actions from the header, Dashboard, Search, Scanner, and Collections merge colors into the existing gradient. They do not reset its type, direction, or interpolation.

Complete gradient links

A ?g= link contains the complete gradient. Opening it intentionally overrides remembered Gradient Studio state because the shared link is an explicit workspace.

Save, share, and export with Pro

/* HexCheck Gradient Studio */
background-color: #6D5DFC;
background: linear-gradient(135deg, #6D5DFC 0%, #1B8E2D 52%, #FFB347 100%);
background: linear-gradient(135deg in oklab, #6D5DFC 0%, #1B8E2D 52%, #FFB347 100%);

Always test advanced CSS interpolation syntax in the browsers your product supports. The fallback declaration appears first so an unsupported advanced declaration does not remove the entire gradient.

Final gradient checklist

• Preview the gradient in all three contexts.
• Compare sRGB, OKLab, and OKLCH rather than assuming one is always best.
• Check whether stop positions create accidental bands or hard edges.
• Review black- and white-text sample coverage.
• Use a solid content surface or overlay when the gradient cannot maintain text contrast.
• Test responsive layouts where content moves across the gradient.
• Confirm advanced CSS interpolation support in target browsers.
• Keep the sRGB fallback when exporting OKLab or OKLCH.