How to use Gradient Generator
A CSS gradient is an image computed by the browser. It fills the element’s background without downloading a picture, and stays sharp when the element grows.
- Choose linear for a straight blend, radial for a circular glow, or conic for colors that sweep around a center.
- Drag each color stop’s position slider to move it through the gradient. Add up to ten stops; the engine sorts them by position before generating CSS. Equal positions create a hard edge.
- Angle rotates linear and conic gradients. Center X and Y position radial and conic gradients; they have no effect on a linear gradient.
A practical starting point
A quiet split-color surface: put two stops at the same midpoint to replace the blend with a crisp diagonal.
background: linear-gradient(135deg, #4164ef 50%, #59d9e9 50%);
Common mistakes
- A background needs an element with visible width and height. Empty elements can collapse to zero height.
- Gradient angles begin at the top: 0deg points upward and 90deg points right.
Frequently asked questions
Why are my stops sorted?
Stops are emitted in increasing position order so their controls correspond to the visible blend. Two stops at the same position remain in their original order.
Can I share private colors?
Share links put the configuration in the URL fragment. The host does not receive it, but anyone with the full link can read it.