‹ Back to Home

Gradient Generator

Build linear, radial, and conic gradients with editable color stops.

Preview

background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

Settings

Type
Size
Stop 1
Stop 2

What Gradient Generator does

Build linear, radial, and conic gradients with editable color stops.

How to use it

  1. Choose linear, radial, or conic, and set the angle.
  2. Add, remove, or edit colors and percentage positions. Stops are sorted by position.
  3. Set PNG dimensions, then save the image or copy the CSS.

Formats and limits

  • CSS text or PNG, up to 4096 pixels on each side.

Privacy

Processing stays in this tab. Input and generated content are not uploaded or stored.

Related tools

All processing runs locally in your browser. This tool is provided as-is without warranty. Keep backups of your original files before processing.

By uploading media, you confirm you own the content or have permission to modify it. Please read the Terms and Conditions.