https://github.com/coder-0xffc/serene-gradients
"A sleek, modern platform for generating high-quality linear gradients and curated color palettes."
https://github.com/coder-0xffc/serene-gradients
color-scheme creativeflow css3 designtools framer-motion frontenddesign gradientmagic html5 javascript madefordesigners palette-generation react shadcn-ui tailwindcss typescript uiux-design vite webdesigntools
Last synced: 10 months ago
JSON representation
"A sleek, modern platform for generating high-quality linear gradients and curated color palettes."
- Host: GitHub
- URL: https://github.com/coder-0xffc/serene-gradients
- Owner: coder-0xffc
- Created: 2025-04-04T12:52:35.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-04-04T13:02:24.000Z (10 months ago)
- Last Synced: 2025-04-04T14:21:46.259Z (10 months ago)
- Topics: color-scheme, creativeflow, css3, designtools, framer-motion, frontenddesign, gradientmagic, html5, javascript, madefordesigners, palette-generation, react, shadcn-ui, tailwindcss, typescript, uiux-design, vite, webdesigntools
- Language: TypeScript
- Homepage: https://serene-gradients.vercel.app
- Size: 194 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Serene Gradients
## 🌈 Overview
Serene Gradients is a powerful web application designed for creating beautiful, customizable gradients with an intuitive interface. Create, animate, and export stunning gradient backgrounds for your design projects.
## ✨ Features
### 🎨 Gradient Creation
- **Multiple gradient types**: Create linear, radial, and conic gradients
- **Color control**: Add unlimited color stops with precise positioning
- **Angle adjustment**: Fine-tune gradient angles with intuitive controls
- **Live preview**: See changes in real-time as you edit
### 🔄 Animation
- **Dynamic animations**: Bring your gradients to life with smooth transitions
- **Customizable speed**: Control the pace of your gradient animations
- **Playback controls**: Play, pause, and adjust animation settings
### 💾 Export Options
- **Multiple formats**: Download as PNG, JPEG, WebP, AVIF, or SVG
- **High resolution**: Export in resolutions up to 16K
- **CSS code**: Copy production-ready CSS for web projects
- **Text overlays**: Add customizable text to your gradients
### 🎭 User Experience
- **Responsive design**: Works perfectly on any device or screen size
- **Dark/Light mode**: Choose your preferred theme for the application
- **Local storage**: Save your favorite gradients to your browser
- **Curated palettes**: Access pre-designed color schemes
## 🚀 Getting Started
### Prerequisites
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No installation required - runs entirely in the browser
### Usage
1. **Visit the website**: Navigate to [Serene Gradients](https://lovable.dev/projects/38d61025-b0e5-486d-b769-05d057ed51f3)
2. **Start creating**: Click the "Start Creating" button on the landing page
3. **Customize your gradient**:
- Select gradient type (linear, radial, conic)
- Add and adjust color stops
- Modify angle, position, and other parameters
4. **Export your creation**:
- Download in your preferred format
- Copy CSS code for web implementation
- Add text overlays if desired
## 🛠️ Development
Serene Gradients is built with modern web technologies for optimal performance and flexibility.
### Tech Stack
- **React**: UI components and state management
- **TypeScript**: Type-safe code for reliability
- **Tailwind CSS**: Utility-first styling
- **Shadcn UI**: Beautiful, accessible UI components
- **Framer Motion**: Smooth animations and transitions
- **Vite**: Fast development and optimized builds
### Project Structure
```
serene-gradients/
├── public/ # Static assets
├── src/
│ ├── components/ # React components
│ │ ├── ui/ # Shadcn UI components
│ │ ├── GradientAnimation.tsx
│ │ ├── GradientCanvas.tsx
│ │ ├── LandingPage.tsx
│ │ ├── SvgExport.tsx
│ │ ├── TextOverlay.tsx
│ │ └── ...
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── pages/ # Application pages
│ ├── App.tsx # Main application component
│ └── main.tsx # Entry point
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
```
### Running Locally
To run the project locally:
```sh
# Clone the repository
git clone
# Navigate to the project directory
cd serene-gradients
# Install dependencies
npm install
# Start the development server
npm run dev
```
## 🎯 Use Cases
- Web designers creating background gradients
- UI/UX professionals designing application themes
- Digital artists exploring color combinations
- Content creators needing eye-catching visuals
- Developers implementing modern web aesthetics
## 🌟 Key Benefits
- **Time-saving**: Create professional gradients in seconds
- **Precision**: Fine-tune every aspect for pixel-perfect results
- **Versatility**: Use for websites, apps, social media, presentations
- **Accessibility**: User-friendly interface for all skill levels
- **Modern aesthetics**: Create trendy, visually appealing designs
## 🔮 Future Enhancements
- Gradient mesh support
- Pattern overlays
- Community sharing features
- Advanced animation paths
- Integration with design tools
## 📝 License
This project is licensed under the MIT License - see the LICENSE file for details.
## 👥 Contributors
- [Your Name/Team]
## 🙏 Acknowledgements
- Shadcn UI for the beautiful component library
- Framer Motion for the animation capabilities
- The React ecosystem and community
---
Made with ❤️ using [Lovable](https://lovable.dev)