Choose the gradient function
Use linear for an axis, radial for an expanding centre or conic for rotation around a point.
One visual CSS declaration
Build linear, radial and conic gradients without guesswork
Edit explicit colour positions, angle, shape and centre while the browser renders the exact declaration. Copy one stable background-image value; no palette or code leaves the isolated capsule.
No account · no network · 2–8 stops · deterministic CSS
Three explicit steps
Choose, position, copy
Place two to eight stops
Integer percentages are sorted explicitly; equal positions remain in insertion order for hard edges.
Copy one declaration
Paste the deterministic background-image into your own stylesheet and test its real context.
Developer and design handoff
Useful when a visual idea needs exact CSS
- Tune a restrained hero or card background and hand off the exact declaration.
- Compare linear, radial and conic structure without rewriting syntax by hand.
- Create explicit hard edges by placing adjacent stops at the same percentage.
Local by construction
Turn a visual direction into exact CSS
Build the declaration, copy it, then verify contrast and compatibility in the component that will use it.