Create stunning linear, radial, conic, and repeating gradients with a visual color picker. Export as CSS, Tailwind, SVG, or PNG — 24+ presets included.
✦ 4 Gradient Types✦ Visual Color Picker✦ 24+ Presets✦ Color Blindness Sim
Beautiful Gradient
CSS Code
🎨 Gradient Type
🔄 Repeating
📐 Direction
deg
📍 Position
%%
🎯 Color Stops
Position0%
Opacity100%
✨ Presets
⚡ Advanced
🎬 Animated Gradient
📥 Import CSS
📤 Export
×
📜 History
⚡ Features
Powerful Gradient Creation Tools
Everything you need to design perfect gradients for your projects.
🎨
4 Gradient Types
Linear, radial, conic, and mesh gradients with full control over direction, shape, and position.
🎯
Visual Color Picker
Drag stops on the gradient bar, fine-tune with HEX/RGB inputs, opacity slider, and recent colors history.
✨
24+ Curated Presets
Beautiful gradient presets organized by theme: Sunset, Ocean, Forest, Neon, Pastel, and Dark.
📋
Multi-Format Export
Copy as CSS, Tailwind utilities, SVG, or inline styles. Download as PNG, SVG, or CSS file.
👁
Color Blindness Sim
Preview how your gradient looks with protanopia, deuteranopia, or tritanopia vision.
Visual angle dial with drag interaction, quick presets for cardinal and diagonal directions.
📥
CSS Import
Paste any CSS gradient code and auto-parse the type, angle, and color stops instantly.
🔒
100% Private
All processing happens in your browser. No data sent to any server. History saved locally.
❓ FAQ
Frequently Asked Questions
You can create linear gradients (with customizable angle), radial gradients (circle or ellipse, with position control), conic gradients (with angle and position), and repeating variants of all three types. You can also layer multiple gradients with the mesh simulation mode.
You can copy the CSS code directly, get Tailwind utility classes, copy as SVG markup, or download as a PNG image (1920×1080, 1080×1080, 4K, or custom resolution). You can also download as an SVG file or a standalone CSS file.
Yes! Paste any valid CSS gradient code into the Import section and click "Parse & Apply". The tool will automatically detect the gradient type, angle, position, and color stops, and set them in the editor.
The color blindness simulation applies SVG color matrix filters to the preview, showing how your gradient would appear to someone with protanopia (red-blind), deuteranopia (green-blind), or tritanopia (blue-blind). This helps ensure your designs are accessible to all users.
You can add up to 10 color stops per gradient. Each stop has its own color, position (0–100%), and opacity (0–100%). Drag stops on the gradient bar or use precise number inputs.
Yes! Once the page loads, all gradient generation, preview rendering, and exports happen entirely in your browser using CSS and Canvas API. No server calls are made after the initial page load.
Click "Save" to store the current gradient to your browser's localStorage. Up to 20 gradients are saved with timestamps. Click any history item to restore it, or click the delete icon to remove it.