Three types: linear (straight line), radial (circular from center), and conic (rotating around center). Linear is most common for backgrounds/buttons, radial for spotlight effects, and conic for color wheels. Switch between them anytime — your colors are preserved.
The primary export is CSS code which you can paste directly into your stylesheet. For saving as an image, you can take a screenshot or use the browser's built-in screenshot tool. The generated CSS works in any modern web project and is compatible with all major frameworks (React, Vue, Angular, etc.).
You can add up to 8 color stops with individual position control (0-100%). For most designs, 2-4 stops produce the best results. Too many stops can create muddy transitions. Use the randomize button for inspiration, or choose from our 12 preset palettes covering popular color schemes.
Yes! Once loaded, this tool works entirely offline since all processing happens in your browser. No server requests are made for gradient generation. This makes it ideal for developers working in air-gapped environments or on confidential projects.
Unlike many gradient tools that only offer linear gradients, this tool supports linear, radial, and conic gradients. It also includes 12 carefully designed preset palettes, random color generation for inspiration, and outputs standard CSS code. All processing is local with zero data upload, making it faster and more private than web-based alternatives.