Gradient Studio

🚀 Getting Started

Welcome to Gradient Studio! Follow these steps to create your first design:

• Choose a Gradient: Click on preset gradients or create custom ones
• Add Text: Use the "+ Add Text" button to add text layers
• Style Your Text: Customize fonts, colors, shadows, and effects
• Position Elements: Drag text layers and resize as needed
• Export: Copy CSS or export as image when finished

✨ Features

🎨 Gradients:

• 12 beautiful preset gradients ready to use
• Custom gradient creator with color picker and angle control
• Linear and radial gradient types
• Random gradient generator for inspiration

📝 Text Layers:

• Unlimited text layers with independent styling
• Drag and drop positioning with resize handles
• 10+ Google Fonts with multiple weights
• Text shadows, glow effects, and backgrounds
• Opacity control and color customization
• URL/hyperlink functionality

🎬 Animations:

• Pulse, rotate, and scale animation effects
• Smooth CSS3-powered transitions
• Real-time preview of animations

💾 Export Options:

• Copy CSS code for web development
• Export as PNG, JPEG, or WebP images
• Advanced CSS with additional properties
• High-quality image exports

💡 Pro Tips

• Grid System: Use the grid overlay for perfect alignment
• Full Screen: Click ⛶ for full-screen preview mode
• Layer Management: Select layers from the list to edit them
• Undo/Redo: Never lose work with 50-action history
• Dark Mode: Switch themes for comfortable editing
• Mobile Ready: Works perfectly on phones and tablets
• Text Input: Press Enter to confirm text, Ctrl+Enter to add new layer
• Resize Text: Select text layer and drag corner handles to resize