CSS Gradient Generator
Build a three-color CSS linear-gradient from HEX colors, angle, and middle-stop position.
How to use
- Adjust start, middle, end colors, angle, and middle stop, then copy the CSS.
Capabilities and scope
The first color is fixed at 0%, the middle uses the selected stop, and the final color is fixed at 100%, with a live preview.
How it works
It generates linear-gradient(angledeg, color1 0%, mid stop%, color2 100%).
Example
135deg with a 50% middle stop creates a diagonal three-color transition.
Useful for
- Draft hero, card, or background gradients
Before you use it
- Interpolation color space and custom easing are not configurable; browser CSS defaults apply.
Frequently asked questions
Can it create radial gradients?
No. The current action is linear-gradient only.