Design & color·Css
CSS Gradient Generator
Build linear, radial, and conic CSS gradients with stops and angles. Fully client-side — no account, uploads, or remote storage.
Added Apr 18, 2026 · Updated Apr 21, 2026
Input
Result
Enter a value for gradient type to see your result.
How it works
Generates CSS gradient code (linear or radial) from two or three colour stops. Copy the output directly into your stylesheet.
Step by step
- 01Choose linear or radial gradient type.
- 02For linear gradients, select the direction.
- 03Pick a start colour, an optional middle colour, and an end colour.
- 04Copy the generated CSS property value or the full background shorthand.
Examples
Purple to pink linear gradient
A three-stop gradient going left to right from indigo through purple to pink, rendered as a CSS background-image property.
Inputs
- Gradient type:
- linear
- Direction:
- to right
- Start color:
- #6366f1
- Middle color (optional):
- #a855f7
- End color:
- #ec4899
Result
- CSS property:
- background-image: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
Note: Use browser DevTools to preview the gradient on any element.
Frequently asked questions
How do I apply the gradient as a background?
Use the 'background' shorthand from the output, e.g. background: linear-gradient(to right, #6366f1, #ec4899); in your CSS. Apply it to any element.