Gradient Studio

A powerful and intuitive gradient generator built with React and TypeScript. Create, customize, and export beautiful gradients for your web projects.

Features

• Real-time Gradient Preview: See your changes instantly as you customize your gradient
• Multiple Gradient Types: Support for linear, radial, and conic gradients
• Advanced Color Control:
  • RGB, HSL, and HEX color inputs
  • Opacity control
  • Up to 10 color stops
  • Vibrancy adjustment
• Gradient Controls:
  • Direction/angle control
  • Easing functions
  • Custom angle input
• Rich Preset Library:
  • Categorized presets (Nature, Neon, Pastel, Retro, etc.)
  • 40+ pre-designed gradients
• Export Options:
  • CSS code (with vendor prefixes)
  • React/TypeScript code
  • SVG export
• Theme Support: Dark and light mode
• Responsive Design: Works on all devices

Tech Stack

• React
• TypeScript
• Tailwind CSS
• Vite
• Lucide Icons

Development

1. Clone the repository:

git clone https://github.com/aisurf3r/Gradient-Studio.git

2. Install dependencies:

cd Gradient-Studio
npm install

3. Start the development server:

npm run dev

4. Build for production:

npm run build

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License

Author

Made with ❤️ by @aisurf3r