Design smooth linear, radial and conic gradients visually. Fine-tune every color stop, preview changes live and copy clean CSS in one click.
Everything you need to experiment quickly, without design software or guesswork.
Add up to eight colors and place each stop exactly where the blend should change.
Switch between linear, radial and conic gradients while keeping your colors.
Take the exact background declaration straight into your website or app.
Choose Linear, Radial or Conic, then click any color swatch to select a new shade. Move the position sliders to control where colors blend and use the angle control to change direction. Add extra stops for richer effects, or start with a preset and customize it.
When the live preview looks right, select Copy CSS. The complete background declaration is copied to your clipboard, ready to paste into a class, component or style sheet. Your gradient is created locally in the browser and is never uploaded.
Choose a gradient type, edit the colors and positions, then adjust the angle. Copy the generated CSS when the preview looks right.
You can make linear gradients for directional blends, radial gradients that radiate from the center and conic gradients that rotate around a center point.
Yes. Add up to eight color stops and position each stop independently.
Yes. It is free, requires no account and creates gradients locally in your browser.
Keep your frontend workflow moving with these free online CSS generators.