Gradient Maker
Design stunning CSS gradients with interactive color stops, 18 presets, and multi-format export including Tailwind, SVG, and CSS animations.
Click to add a stop · Drag to reposition
Export
Gradient Type
Color Stops
Presets
Import from CSS
How It Works
Pick a Type
Choose linear, radial, or conic gradient — each creates a distinct visual effect.
Add Color Stops
Click the gradient bar to add stops, drag them to reposition, and edit any stop's color and opacity.
Fine-Tune
Adjust direction angle, radial shape and size, center position, and number of stops.
Export
Copy ready-to-use CSS, Tailwind classes, or CSS custom property. Download as SVG or preview with animation.
Frequently Asked Questions
Related tools
Other UIXColors tools that pair well with CSS Gradient Maker.
Color Converter
Convert colors between HEX, RGB, HSL, OKLCH, OKLab, CMYK, and named formats. Real-time preview. Free for designers and front-end developers.
Image Color Palette Extractor
Extract dominant color palettes from any image. Upload PNG, JPG, WebP and get HEX, RGB, OKLCH values. Free tool for designers and brands.
Site Style Guide Generator
Extract complete style guides from any website URL: colors, typography, logos, buttons, design tokens. Browser-accurate via real Chromium. Free.