Presets
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
What it does
Build linear, radial, and conic CSS gradients with multiple color stops and positions. Adjust the angle, add or remove stops, and grab copy-ready CSS - with a live preview. 100% client-side.
How to use it
- Pick a Type (linear / radial / conic) and, where relevant, an Angle.
- Add color stops, set each stop’s color and position.
- Copy the CSS.
Examples
Linear 90°, #6366f1 → #ec4899 →
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);Good to know
- Private: all generation is local.
- Stops are sorted by position automatically.
- Related tools: Color Picker, Palette Generator.