Gradient Generator

All tools
Gradient Generator
Build linear, radial and conic CSS gradients from scratch with draggable multi-stop control and curated presets. Copy ready-to-paste CSS instantly.
Live preview
Presets
Gradient type
Angle
°
Color stops
Drag a handle to move a stop, or click the bar to add one. Select a stop to edit its color.
Selected stop
%
CSS
background: —;

Everything is computed live in your browser — no sign-up, completely free.

Share this
Related Tools
Gradient Generator from Image

Extract a beautiful gradient from any photo — drop an image, pick a mood, and the dominant colors become draggable gradient stops. Copy ready-to-paste CSS instantly.
Color Palette Generator

Build harmonious color palettes from an interactive color wheel — apply harmony rules like analogous, complementary or triad, then copy any value instantly.
Color Mixer

Blend a start color into an end color across up to 10 steps — preview the gradient, grab every shade and copy any format instantly.
Popular searches
gradient generator css gradient maker linear gradient generator radial gradient maker conic gradient css free gradient generator

Add this free tool to your own website — copy and paste the code below.