🎨 CSS Gradient Generator

Generate beautiful CSS gradients with live preview!

✨ Features

• Live Preview — See your gradient update in real-time
• Multiple Types — Linear, Radial, and Conic gradients
• Color Stops — Add unlimited colors with position controls
• Random Generator — 🎲 Create random gradients with one click
• Save to Gallery — 💾 Save your favorite gradients locally
• Export to PNG — 📥 Download gradients as high-res images
• 25+ Presets — Pre-made gradients organized by category
• 🔗 Share via URL — Generate and copy shareable URLs with gradient parameters
• 🌓 Dark/Light Theme — Toggle between beautiful dark and light themes

🆕 What's New

v2.0 - Share, Animate & Theme Support

🎉 New Features:

• 🔗 Shareable URLs — Share your gradients with anyone! Copy the URL with Ctrl+U
• ✨ Smooth Animations — Beautiful entrance animations for all UI elements
• 🌓 Dark/Light Theme Toggle — Switch between themes with Ctrl+T
• 🎨 Enhanced Preset Animations — Presets animate in with staggered effects
• 📱 Improved Toast Notifications — Better feedback for user actions

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl+R	Generate random gradient
Ctrl+Shift+R	Random from history
Ctrl+S	Save current gradient
Ctrl+C	Copy CSS code
Ctrl+U	NEW: Copy shareable URL
Ctrl+D	Download gradient as PNG
Ctrl+T	Toggle dark/light theme
?	Show keyboard shortcuts help

🎨 Preset Categories

• 🌅 Sunset — Golden Hour, Purple Dusk, Coral Sunset, etc.
• 🌿 Nature — Ocean, Forest, Mint, Spring, Tropical
• 💡 Neon — Pink Neon, Cyber, Electric, Vaporwave, Synthwave
• 🎨 Pastel — Soft Cloud, Cotton Candy, Lavender, Peach, Rose
• 🌑 Dark — Midnight, Deep Space, Obsidian, Charcoal, Noir

🚀 Usage

Online

Visit the live demo

Local

1. Open index.html in your browser
2. Select gradient type (Linear/Radial/Conic)
3. Adjust angle (for Linear/Conic)
4. Add/remove color stops
5. Copy the generated CSS or download as PNG
6. Save favorites to your gallery!

Share Your Gradients 🆕

1. Create your perfect gradient
2. Click the 🔗 Share button or press Ctrl+U
3. The URL is copied with your gradient parameters
4. Share the link — anyone opening it will see your exact gradient!

📱 PWA Support

Works offline as a Progressive Web App!

🛠️ Technologies

• HTML5
• CSS3 with animations
• Vanilla JavaScript
• Service Worker for offline support
• LocalStorage for persistence

---

Made with ❤️ by Agent-Lumi