{"id":20040470,"url":"https://github.com/rembertdesigns/gradient-background-picker","last_synced_at":"2025-10-27T15:42:43.863Z","repository":{"id":135211755,"uuid":"517193756","full_name":"rembertdesigns/Gradient-Background-Picker","owner":"rembertdesigns","description":"🔴🟠🟡🟢🔵🟣 Gradient Picker allows you to make combinations of colors for websites, apps, etc..","archived":false,"fork":false,"pushed_at":"2022-08-10T23:29:01.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-13T17:51:15.671Z","etag":null,"topics":["color-picker","css-animations","html-css-javascript","javascript-applications"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rembertdesigns.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-24T00:35:14.000Z","updated_at":"2022-07-24T00:36:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"2621135f-f436-40b4-b92f-331a4e8ea71c","html_url":"https://github.com/rembertdesigns/Gradient-Background-Picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rembertdesigns/Gradient-Background-Picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rembertdesigns%2FGradient-Background-Picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rembertdesigns%2FGradient-Background-Picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rembertdesigns%2FGradient-Background-Picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rembertdesigns%2FGradient-Background-Picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rembertdesigns","download_url":"https://codeload.github.com/rembertdesigns/Gradient-Background-Picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rembertdesigns%2FGradient-Background-Picker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268399263,"owners_count":24244416,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-picker","css-animations","html-css-javascript","javascript-applications"],"created_at":"2024-11-13T10:42:20.362Z","updated_at":"2025-10-27T15:42:43.854Z","avatar_url":"https://github.com/rembertdesigns.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 Advanced Gradient Generator\n\nA powerful, feature-rich gradient generator that lets you create beautiful animated multi-color gradients for your web projects. Built with vanilla JavaScript, this tool offers professional-grade features including animations, advanced color picker, gradient library management, and multiple export formats.\n\n## 📸 Screenshots\n\n![Main Interface](https://via.placeholder.com/800x500/667eea/ffffff?text=Gradient+Generator+Interface)\n*Main gradient generator interface with animation controls and live preview*\n\n![Advanced Color Picker](https://via.placeholder.com/600x400/764ba2/ffffff?text=Advanced+Color+Picker)\n*Advanced color picker with HSL controls, harmony generator, and eyedropper tool*\n\n## 📋 Table of Contents\n\n- [✨ Features](#-features)\n- [🚀 Getting Started](#-getting-started)\n- [🎮 How to Use](#-how-to-use)\n- [🏗️ Project Structure](#️-project-structure)\n- [🎯 Use Cases](#-use-cases)\n- [🔧 Customization](#-customization)\n- [🌐 Browser Support](#-browser-support)\n- [❓ FAQ \u0026 Troubleshooting](#-faq--troubleshooting)\n- [🗺️ Roadmap](#️-roadmap)\n- [🤝 Contributing](#-contributing)\n- [📜 License](#-license)\n\n## ✨ Features\n\n### 🎬 Animation System\n- **Multiple Animation Types**: Rotate, Shift, Pulse, and Static options\n- **Speed Control**: Adjustable animation speed from 0.5x to 5x\n- **Direction Control**: Forward and reverse animations\n- **Real-time Preview**: See animations as you create them\n- **Timeline Editor**: Advanced keyframe-based animation system with custom easing functions\n\n### 🎨 Advanced Color Management\n- **Unlimited Color Stops**: Add as many gradient stops as needed\n- **Advanced Color Picker**: HSL sliders, RGB inputs, hex values\n- **Color Harmony Generator**: Complementary, triadic, analogous, and monochromatic schemes\n- **Eyedropper Tool**: Pick colors directly from your screen (supported browsers)\n- **Recent Colors**: Automatic tracking of recently used colors\n- **Color Palette Extraction**: Extract colors from images or websites\n\n### 🎭 Pattern \u0026 Texture Overlays\n- **Pattern Types**: Noise, stripes, dots, waves, and more\n- **Advanced Textures**: Paper, canvas, fabric, metal, glass, concrete, and wood\n- **Custom Uploads**: Upload your own textures and SVG patterns\n- **Procedural Patterns**: Perlin noise, Voronoi, fractal, and cellular patterns\n- **Blend Modes**: 12+ blend modes including multiply, screen, overlay, and soft-light\n\n### 🕸️ Mesh Gradient Mode\n- **Interactive Mesh Grid**: Create complex multi-point gradients\n- **Grid Sizes**: 2×2, 3×3, and 4×4 configurations\n- **Click-to-Edit**: Easy color selection for each mesh point\n- **Randomization**: Instant creative variations\n\n### 🎭 Gradient Masks\n- **Shape Masks**: Circle, ellipse, polygon, heart, and star\n- **Custom SVG Paths**: Define your own mask shapes\n- **Edge Blur Control**: Smooth mask edges\n- **Size Adjustment**: Scale masks to fit your needs\n\n### 🗂️ Gradient Library\n- **Favorites System**: Save and organize your best gradients\n- **Collections**: Group gradients by project or theme\n- **Search \u0026 Filter**: Find gradients quickly with tags and names\n- **Import/Export**: Share gradient libraries with others\n- **12 Built-in Presets**: Professional gradient starting points\n- **Community Feed**: Browse trending and popular gradients\n\n### 🤖 AI-Powered Features\n- **Similar Gradients**: Generate variations of your current gradient\n- **Mood-Based Suggestions**: 10+ mood categories from energetic to futuristic\n- **Brand Palette Generator**: Create cohesive color schemes from a single brand color\n- **Seasonal Trends**: Explore gradients for spring, summer, autumn, winter, and design trends\n\n### 🎨 Advanced Gradient Combinations\n- **Layer Multiple Gradients**: Stack gradients with different blend modes\n- **Mix Two Gradients**: Blend between two gradients with adjustable ratio\n- **Morph Animation**: Generate smooth transitions between gradients\n- **Split-Screen Compare**: Side-by-side gradient comparison\n\n### 🖱️ Interactive Canvas\n- **Visual Editing**: Click and drag to reposition color stops\n- **Double-Click Add**: Add new stops anywhere on the canvas\n- **Right-Click Remove**: Remove stops with context menu\n- **Bezier Curves**: Create smooth color transitions\n- **Gradient Warping**: Enable advanced gradient distortion\n\n### ♿ Accessibility Features\n- **Contrast Checker**: WCAG AA/AAA compliance testing\n- **Color Blindness Simulation**: 8+ types including protanopia, deuteranopia, and tritanopia\n- **Readability Score**: Real-time text readability analysis\n- **WCAG Compliance Report**: Comprehensive accessibility audit\n\n### ⚡ Performance Optimization\n- **CSS Complexity Analysis**: Track code efficiency\n- **Performance Impact Score**: Measure rendering performance\n- **File Size Estimation**: Know before you export\n- **Browser Compatibility**: Check support across Chrome, Firefox, Safari, and Edge\n- **Auto-Optimization**: Generate optimized CSS and fallbacks\n\n### 🔧 Professional Tools\n- **Multiple Gradient Types**: Linear, radial, and conic gradients\n- **Full Control**: Adjust angles, positions, and color stops precisely\n- **Live Demos**: See how gradients look on cards, buttons, and text\n- **Share URLs**: Generate shareable links with all gradient settings\n- **QR Code Generation**: Quick mobile sharing\n- **Embed Code**: Integrate gradients into websites\n\n### 📤 Export Options\n- **CSS**: Standard CSS with animation keyframes\n- **Tailwind**: Tailwind CSS classes and utilities\n- **React**: JSX-ready style objects\n- **SCSS**: Variables and mixins for Sass projects\n- **Vue**: Vue.js code\n- **Svelte**: Svelte component code\n- **Angular**: Angular template syntax\n- **Flutter**: Dart gradient code\n- **SwiftUI**: Swift gradient declarations\n- **Styled Components**: CSS-in-JS format\n- **Emotion**: Emotion CSS syntax\n- **CSS Variables**: Custom properties format\n- **PNG/SVG Downloads**: High-quality image exports (Full HD, 2K, 4K)\n- **GIF/MP4**: Animated gradient exports\n\n### 🤝 Collaboration \u0026 Sharing\n- **Social Media Previews**: Generate cards for Twitter and Facebook\n- **Platform Sharing**: Direct sharing to Dribbble, Behance, Twitter, and Pinterest\n- **WordPress \u0026 Shopify**: Export format-specific code snippets\n- **Figma \u0026 Sketch**: Design tool integration formats\n\n### 🎓 Learning \u0026 Onboarding\n- **Interactive Tutorial**: Step-by-step guided tour\n- **Keyboard Shortcuts**: Efficient workflow with hotkeys\n- **Context Help**: Tooltips and inline guidance\n- **Video Export**: Create gradient animation videos\n\n## 🚀 Getting Started\n\n### Quick Start\n1. **Clone the repository**\n```bash\n   git clone https://github.com/rembertdesigns/gradient-generator.git\n   cd gradient-generator\n```\n2. **Open in browser**\n```bash\n# Simply open index.html in your browser\n   open index.html\n   # or\n   python -m http.server 8000  # For local development server\n```\n3. **Start creating!**\n- Adjust color stops by clicking on color inputs\n- Change gradient type and angle\n- Add animations and export your creation\n\n### No Build Process Required\nThis project uses vanilla JavaScript, HTML, and CSS - no complex build tools or dependencies needed!\n\n## 🎮 How to Use\n\n### Creating Your First Gradient\n1. **Choose Colors**: Click on color stops to open the advanced color picker\n2. **Adjust Positions**: Drag the position sliders to move color stops\n3. **Set Type \u0026 Angle**: Choose linear, radial, or conic gradients\n4. **Add Animation**: Select rotation, shift, or pulse effects\n5. **Export**: Copy CSS, download images, or save to favorites\n\n### Advanced Features\n\n#### Pattern \u0026 Texture Overlays\n1. Navigate to the \"Pattern \u0026 Effects\" section\n2. Select a pattern type (noise, stripes, dots, waves)\n3. Adjust intensity and scale sliders\n4. Choose blend modes for unique effects\n5. Upload custom textures for personalized looks\n\n#### Mesh Gradient Mode\n1. Enable mesh mode with the toggle switch\n2. Select grid size (2×2, 3×3, or 4×4)\n3. Click on grid points to change colors\n4. Use randomize for instant variations\n5. Reset to start fresh\n\n#### Interactive Canvas Editing\n1. Enable interactive mode on the canvas\n2. Click and drag color stops to reposition\n3. Double-click to add new stops\n4. Right-click stops to remove them\n5. Adjust bezier intensity for smooth transitions\n\n#### Timeline Animation Editor\n1. Add keyframes at different time points\n2. Set gradient appearance for each keyframe\n3. Choose easing functions (linear, ease, bounce, etc.)\n4. Play/pause to preview animation\n5. Export as CSS keyframes or video\n\n#### AI-Powered Suggestions\n1. Go to \"AI-Powered Suggestions\" section\n2. Generate similar gradients with variation control\n3. Explore mood-based gradients (energetic, calm, romantic, etc.)\n4. Create brand palettes from a single color\n5. Discover seasonal and trending gradients\n\n#### Accessibility Testing\n1. Open \"Accessibility Checker\" section\n2. Test contrast ratios with different text colors\n3. Simulate 8+ types of color blindness\n4. Review WCAG compliance report\n5. Get suggestions for improvements\n\n#### Color Palette Extraction\n1. Upload an image or enter a website URL\n2. Extract color palette automatically\n3. Apply extracted colors to your gradient\n4. Save palettes for later use\n\n## 🏗️ Project Structure\n```bash\ngradient-generator/\n├── index.html          # Main HTML structure with all features\n├── style.css           # Complete styling and animations\n├── main.js             # Core application logic\n└── README.md           # This file\n```\n### Architecture Highlights\n- **Class-based JavaScript**: Clean, maintainable code structure\n- **CSS Grid \u0026 Flexbox**: Responsive, modern layouts\n- **Local Storage**: Persistent favorites and settings\n- **Modular Design**: Easy to extend and customize\n- **Canvas API**: Advanced pattern generation and export\n- **Web APIs**: EyeDropper, FileReader, and more\n\n## 🎯 Use Cases\n\n### For Developers\n- **Rapid Prototyping**: Quickly generate gradients for mockups\n- **Production Ready**: Export clean, optimized CSS\n- **Framework Integration**: Support for React, Vue, Angular, Flutter, SwiftUI, and more\n- **Design Systems**: Consistent gradient libraries across projects\n- **Accessibility Testing**: Ensure WCAG compliance\n- **Performance Optimization**: Analyze and optimize gradient complexity\n\n### For Designers\n- **Visual Exploration**: Real-time gradient experimentation\n- **Color Harmony**: Built-in color theory tools\n- **Asset Generation**: High-quality PNG/SVG/GIF/MP4 exports\n- **Collaboration**: Shareable gradient collections\n- **Mesh Gradients**: Create complex multi-point gradients\n- **Brand Identity**: Generate cohesive color palettes\n\n### For Content Creators\n- **Social Media Assets**: Export optimized cards for platforms\n- **Video Backgrounds**: Generate animated gradient videos\n- **Website Embeds**: Easy integration code\n- **QR Codes**: Mobile-friendly sharing\n\n## 🔧 Customization\n\n### Adding New Animation Types\n```javascript\n// In main.js, extend the animation system\nupdateAnimation() {\n    // Add your custom animation logic here\n    if (this.animationType === 'your-animation') {\n        // Custom animation implementation\n    }\n}\n```\n### Custom Color Presets\n```javascript\n// Add to the presets array in loadPresets()\nconst customPresets = [\n    { name: 'Your Brand', gradient: 'linear-gradient(45deg, #yourcolor1, #yourcolor2)' },\n    // Add more presets\n];\n```\n### Adding New Patterns\n```javascript\n// In the pattern generation section\ngeneratePattern(type) {\n    switch(type) {\n        case 'your-pattern':\n            // Custom pattern generation logic\n            break;\n    }\n}\n```\n### Theming\nModify CSS custom properties in `style.css`:\n```javascript\n:root {\n    --primary-color: #667eea;\n    --secondary-color: #764ba2;\n    --background-blur: 10px;\n    /* Customize colors and effects */\n}\n```\n## 🌐 Browser Support\n\n- **Chrome/Edge**: Full support including eyedropper tool\n- **Firefox**: Full support (eyedropper coming soon)\n- **Safari**: Full support with minor animation differences\n- **Mobile**: Responsive design works on all devices\n\n### Feature Support by Browser\n| Feature | Chrome | Firefox | Safari | Edge |\n|---------|--------|---------|--------|------|\n| Basic Gradients | ✅ | ✅ | ✅ | ✅ |\n| Animations | ✅ | ✅ | ✅ | ✅ |\n| Eyedropper | ✅ | ⏳ | ⏳ | ✅ |\n| Canvas Export | ✅ | ✅ | ✅ | ✅ |\n| Mesh Gradients | ✅ | ✅ | ✅ | ✅ |\n| Timeline Editor | ✅ | ✅ | ✅ | ✅ |\n\n## 📱 Responsive Design\n\nThe generator is fully responsive and works beautifully on:\n- **Desktop**: Full-featured experience with all tools\n- **Tablet**: Optimized layout with touch-friendly controls\n- **Mobile**: Streamlined interface with essential features\n\n## ❓ FAQ \u0026 Troubleshooting\n\n### Common Issues\n\n**Q: Animations aren't working on my browser**\nA: Animations use CSS transforms and may have limited support on older browsers. Try updating your browser or disabling hardware acceleration if you experience performance issues.\n\n**Q: Eyedropper tool says \"not supported\"**\nA: The EyeDropper API is currently supported in Chrome/Edge 95+. Firefox and Safari support is coming soon. You can still manually enter color values.\n\n**Q: My gradients look different when exported**\nA: Some complex gradients with many color stops might render differently across browsers. Test your exported CSS in your target browsers for consistency.\n\n**Q: Local storage data is gone**\nA: Favorites and collections are stored in browser local storage. Clear browser data or incognito mode will reset these. Use the export feature to backup your gradients.\n\n**Q: Can I use this for commercial projects?**\nA: Yes! This project is MIT licensed, so you can use generated gradients in any project, commercial or personal.\n\n**Q: How do I use the mesh gradient feature?**\nA: Enable mesh mode in the Mesh Gradient section, select your grid size, and click on grid points to change colors. You can also randomize for quick variations.\n\n**Q: Can I extract colors from images?**\nA: Yes! Use the Color Palette Extraction section to upload images or enter website URLs. The tool will automatically extract the dominant colors.\n\n**Q: How do I test if my gradient is accessible?**\nA: Use the Accessibility Checker section to test contrast ratios, simulate color blindness, and get WCAG compliance reports with improvement suggestions.\n\n### Performance Tips\n- Limit animations on mobile devices for better battery life\n- Use fewer color stops for smoother gradients\n- Export static CSS for production instead of keeping animations\n- Test performance impact score before using complex patterns\n- Generate optimized CSS for better rendering\n\n### Keyboard Shortcuts\n\n- **Ctrl/Cmd + S**: Save to Favorites\n- **Ctrl/Cmd + C**: Copy CSS\n- **Ctrl/Cmd + Z**: Undo\n- **Ctrl/Cmd + Y**: Redo\n- **Alt + R**: Random Gradient\n- **Alt + D**: Toggle Dark Mode\n- **Space**: Play/Pause Animation\n- **?**: Show Keyboard Shortcuts\n\n## 🗺️ Roadmap\n\n### Recently Added ✅\n- [x] **Mesh Gradient Mode**: Multi-point gradient system with interactive grid\n- [x] **Advanced Patterns \u0026 Textures**: 7+ texture types with custom upload support\n- [x] **Timeline Animation Editor**: Keyframe-based animations with custom easing\n- [x] **Accessibility Suite**: Contrast checker, color blindness simulation, WCAG compliance\n- [x] **AI-Powered Suggestions**: Similar gradients, mood-based, brand palettes, seasonal trends\n- [x] **Color Palette Extraction**: From images and websites\n- [x] **Gradient Combinations**: Layer, mix, morph, and compare modes\n- [x] **Interactive Canvas**: Visual gradient editing with bezier curves\n- [x] **Gradient Masks**: Shape masks with custom SVG support\n- [x] **Performance Tools**: Optimization analysis and browser compatibility\n- [x] **Extended Export Options**: 13+ format including Flutter, SwiftUI, and video\n- [x] **Collaboration Features**: QR codes, embeds, social media cards\n- [x] **Community Feed**: Browse trending gradients\n- [x] **Tutorial System**: Interactive onboarding\n\n### Near Term (Next Release)\n- [ ] **3D Gradient Preview**: WebGL-powered 3D visualization\n- [ ] **Gradient Animation Presets**: Pre-built animation templates\n- [ ] **Collaborative Editing**: Real-time multi-user editing\n- [ ] **Version History**: Track gradient changes over time\n- [ ] **Custom Easing Curves**: Visual bezier curve editor\n- [ ] **Gradient Interpolation**: Smart color mixing algorithms\n\n### Medium Term (Next 3 Months)\n- [ ] **AI Color Naming**: Automatic gradient name generation\n- [ ] **Advanced Morphing**: Multi-gradient transition sequences\n- [ ] **Design System Integration**: Figma/Sketch plugin support\n- [ ] **Mobile App**: Progressive Web App with offline support\n- [ ] **Team Workspaces**: Organization-level gradient libraries\n- [ ] **API Access**: Programmatic gradient generation\n\n### Long Term (6+ Months)\n- [ ] **Machine Learning**: Smart gradient recommendations based on usage\n- [ ] **3D Mesh Gradients**: Volumetric gradient rendering\n- [ ] **AR Preview**: See gradients in augmented reality\n- [ ] **Cloud Sync**: Cross-device gradient synchronization\n- [ ] **Marketplace**: Share and sell gradient packs\n- [ ] **Integration SDK**: Embed generator in other applications\n\n### Community Requested\n- [ ] **Gradient to Code**: Reverse engineer gradients from images\n- [ ] **Batch Processing**: Generate multiple gradient variations\n- [ ] **Color Spaces**: Support for LAB, LCH, and other color spaces\n- [ ] **Gradient Blending Modes**: Advanced mixing techniques\n- [ ] **Print Optimization**: CMYK export for print design\n\n*Have an idea? [Open an issue](../../issues) or contribute to the discussion!*\n\n## 🤝 Contributing\n\nWe welcome contributions! Please read our [Contributing Guidelines](CONTRIBUTING.md) and [Code of Conduct](CODE_OF_CONDUCT.md) before getting started.\n\n### Quick Start for Contributors\n1. **Fork the repository**\n2. **Create a feature branch**: `git checkout -b feature/amazing-feature`\n3. **Commit changes**: `git commit -m 'Add amazing feature'`\n4. **Push to branch**: `git push origin feature/amazing-feature`\n5. **Open a Pull Request**\n\n### Ideas for Contributions\n- New animation types\n- Additional export formats\n- Color accessibility tools\n- Performance optimizations\n- UI/UX improvements\n- Documentation improvements\n- Bug fixes and testing\n- New pattern types\n- Mesh gradient enhancements\n- AI suggestion improvements\n\n### Development Setup\n```bash\n# Clone your fork\ngit clone https://github.com/yourusername/gradient-generator.git\ncd gradient-generator\n\n# Create a new branch\ngit checkout -b feature/your-feature-name\n\n# Make changes and test in browser\n# No build process required!\n\n# Commit and push\ngit add .\ngit commit -m \"Description of changes\"\ngit push origin feature/your-feature-name\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frembertdesigns%2Fgradient-background-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frembertdesigns%2Fgradient-background-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frembertdesigns%2Fgradient-background-picker/lists"}