Tailwind Gradient Generator

Create, customize, and export beautiful gradients for your web projects

Created by Nishit Baria

Live Demo

✨ Features

• 🎨 Interactive Gradient Builder - Create linear, radial, and conic gradients with intuitive controls
• 🔄 Real-time Preview - See your gradient changes instantly in multiple preview modes
• 📱 Responsive Design - Works perfectly on desktop and mobile devices
• 📤 Multiple Export Options - Export as CSS, Tailwind classes, SVG, or image
• 🖼️ Image Color Extraction - Extract colors from images to create matching gradients
• 🎭 Component Previews - See your gradient applied to UI components like cards, buttons, and more
• ♿ Accessibility Checker - Verify text contrast and accessibility compliance
• 📚 Curated Gradient Collection - Browse and use pre-designed gradient combinations
• 🔄 History & Favorites - Save and revisit your gradient creations
• 🌐 Offline Support - Works even without an internet connection

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/tailwind-gradient-generator.git
   cd tailwind-gradient-generator

2. Install dependencies:

   pnpm install

3. Start the development server:

   pnpm dev

4. Open http://localhost:3000 in your browser

🛠️ Built With

• Next.js 15 - React framework with App Router
• React 19 - UI library
• Tailwind CSS 4 - Utility-first CSS framework
• TypeScript - Type-safe JavaScript
• Zustand - State management
• Framer Motion - Animation library
• Radix UI - Headless UI components
• Lucide React - Icon library

📱 PWA Support

This application supports Progressive Web App (PWA) features:

• Installable on desktop and mobile devices
• Offline functionality
• Responsive design for all screen sizes

🧩 Core Components

• Gradient Generator - The main interface for creating gradients
• Color Selector - Choose colors from Tailwind's palette or custom values
• Direction Selector - Set the gradient direction or angle
• Gradient Preview - View your gradient in different contexts
• Export Dialog - Export your gradient in various formats
• Accessibility Checker - Verify contrast ratios for text readability
• Image Color Extractor - Pull colors from uploaded images

🔧 Advanced Usage

Custom Angle Gradients

Beyond the standard directions, you can create custom angle gradients:

1. Select "Custom Angle" from the direction dropdown
2. Use the angle slider to set your desired angle (0-360°)

Color Extraction

Extract colors from images to create matching gradients:

1. Click "Extract Colors from Image"
2. Upload an image or provide a URL
3. Click on colors in the image to use them in your gradient

Component Preview

See how your gradient looks on real UI components:

1. Switch to the "Component" tab in the preview section
2. Select from card, button, navbar, or hero components
3. Adjust your gradient to see real-time changes

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgements

• Tailwind CSS for the color system
• Radix UI for accessible UI components
• Vercel for hosting and deployment
• Nishit Baria for creating this project

---

Made with ❤️ for the web development community

© 2024 Nishit Baria | Tailwind Gradient Generator