17 / CSS / 2026-04-11
Gradient Explorer
Tune the brand gradient. Live previews, presets, copy as CSS.
How it works
// 01 DPI and pixel density
Every change in the control panel updates a React state object, which is serialized to a `background-image` string and written to the preview element's inline style. Serialization is a small pure function that maps the state (type, angle, stops, interpolation) to the CSS gradient syntax. Because the preview is styled directly, the rendering engine is the browser itself, not a canvas or a shader. Whatever the widget shows is exactly what a stylesheet will render.
// 02 Bleed and cut tolerance
Interpolation modes use the modern CSS gradient syntax: `linear-gradient(45deg in oklch, #fd109a, #00d4ff)`. When the user picks HSL or OKLCH, the color space token is inserted into the gradient string. Browsers that support the syntax render in the chosen space. Browsers that do not fall back to sRGB, which is the safe default behavior specified by the CSS Color Module 4 spec.
// 03 Safe zone and trim accuracy
Color stop handling supports both percentage and keyword positions. Adding a stop appends a new entry to the state array with a percentage derived from the click position on the gradient track. Dragging a stop updates the percentage in real time. Deleting a stop removes the entry and recomputes the gradient string. The minimum stop count is two; the UI prevents accidental single-stop gradients.
// why this exists
live design tooling
CSS gradients are a designer's sketchpad. They appear in hero backgrounds, button hovers, badge treatments, and the subtle color washes that separate a handcrafted interface from a template. This widget is a live editor for them. Pick colors, choose angles, add stops, tune interpolation, and copy the exact CSS out. The rendered preview updates on every change so you can see the gradient at the size it will ship.
Where `gradient-forge` uses GLSL for animated, noise-perturbed surfaces, this widget is pure CSS. Linear and radial gradients, multiple stops, angle control, interpolation mode (HSL, OKLCH, or default sRGB), and six preset starting points tuned to the site's brand palette. The output is a single `background-image` property ready to paste into any stylesheet.
The interpolation mode selector matters more than it looks. A linear gradient from red to green in sRGB passes through a muddy yellow-brown in the middle. The same gradient in OKLCH passes through clean, saturated orange. That difference is usually the line between a gradient that looks like brand work and a gradient that looks like a 2010 CSS tutorial. Modern browsers (Safari 16.4+, Chrome 111+, Firefox 113+) support `in oklch` directly in the gradient syntax, which means you no longer need a polyfill to get accurate color blending in production CSS.
The preset gradients are tuned to the site's own color tokens and serve as a starting point for your own edits. Pick one, shift the angle, swap one color, and you have a custom gradient with the same sense of palette as the rest of the site. That is how design systems are supposed to work: make the defaults good, let edits stay on-brand without effort.
Export options include plain CSS, Tailwind arbitrary values, and a React inline-style object. Copy the format that matches your codebase. The rendered output preserves trailing whitespace and quoting so the pasted value drops straight into source without reformatting.
Frequently asked questions
What is the difference between linear and radial gradients?
Linear gradients blend along a straight axis at a given angle. Radial gradients blend outward from a center point. Linear for skies and washes; radial for glows, spotlights, and orb effects.
Why does my gradient look muddy in the middle?
You are interpolating in sRGB. Switch to OKLCH. sRGB interpolation passes through low-chroma middle values (red to green goes through brown); OKLCH preserves saturation across the blend.
Do all browsers support OKLCH gradients?
Chrome 111+, Safari 16.4+, Firefox 113+. Older browsers fall back to sRGB interpolation automatically, so the gradient will still render, just with duller midpoints.
How many color stops can I add?
The widget caps at eight stops because beyond that the editing UI becomes unusable. CSS itself has no hard limit; custom gradients with 15 or more stops exist for fine-tuned looks.
What angle syntax should I use?
Degrees (0deg to 360deg) are the most predictable. 0deg points up. 90deg points right. 180deg points down. Keywords like 'to right' work but are harder to remember than degrees once you are past the basics.
Can I animate a CSS gradient?
The colors and stops are not animatable with raw CSS transitions yet. You can animate a CSS custom property holding the gradient, or use a JavaScript-driven update. Houdini's Paint API is the future, not the present.
How do I get a gradient to fill the whole background?
Set background-image to the gradient and background-size to cover. For fixed viewport coverage, use 100vw by 100vh on the container.
Why does my gradient have visible banding?
Your color stops are too similar in value. Increase the contrast between stops, or add a subtle noise texture on top of the gradient. Banding is mostly a display bit-depth issue, not a CSS issue.
Can I export as an image?
Not from the widget directly. Take a screenshot of the preview. The whole point of CSS gradients is you should not need an image in the first place.