Tiny Toolkit

CSS Gradient Generator

Build linear, radial, or conic CSS gradients with a live full-width preview. Add as many colour stops as you need and drag them to any position between 0% and 100%. Copy the generated background CSS property when you are satisfied with the result.

All processing happens in your browser. No data is sent to any server.

Frequently Asked Questions

What types of CSS gradients can I generate?
Linear, radial, and conic gradients are all supported.
Can I add more than two colour stops?
Yes — click "Add Stop" to add as many colour stops as you need, each with its own colour and position.
How do I copy the CSS output?
Click the "Copy CSS" button to copy the complete background CSS declaration to your clipboard.

Related Tools

Color Lightener & Darkener

Generate tints and shades of any color. Click any swatch to copy its HEX, RGB, or HSL code.

Color Code Converter

Convert colors between HEX, RGB, RGBA, HSL, HSLA, and CSS named colors instantly.

Tailwind Shade Generator

Generate a full 11-stop Tailwind CSS color scale from any base color. Export as a JS object or CSS variables.