Skip to content

jishantukripal/Gradient-Generator

Repository files navigation

🌈 Gradient Background Generator 🎨

This simple app allows you to generate beautiful, random gradient backgrounds with just a click. Built with React.js and styled with Tailwind CSS, this tool creates vibrant gradients, displays the corresponding Tailwind CSS code, and even lets you copy the code directly to your clipboard. ✨

🎯 Features

  • 🖌️ Random Gradient Generator: Click a button to generate a unique gradient background.
  • 🔥 Dynamic Background: The generated gradient applies to the entire app background.
  • 🧰 Tailwind CSS Code Display: The Tailwind CSS code for the gradient is shown, ready to use in your projects.
  • 📋 One-Click Copy: Copy the gradient's Tailwind CSS code to your clipboard with a single click.
  • Notification: Get a notification with a tick when the code is successfully copied.

🚀 Demo

Gradient Background Generator Demo

🛠️ Technologies Used

  • ⚛️ React.js: Frontend library for building the user interface.
  • 🌬️ Tailwind CSS: Utility-first CSS framework for fast and responsive styling.
  • JavaScript: Handles the logic behind random gradient generation.

📝 How It Works

  1. Generate Gradient: Hit the "Generate Random Gradient" button, and a random gradient is applied as the background of the app.
  2. Copy Tailwind CSS Code: The generated Tailwind CSS code is displayed in a box, click the code to copy it to your clipboard.
  3. Use It Anywhere: Paste the copied Tailwind CSS code in your project to apply the same gradient.

🚀 Getting Started

Follow these steps to get the project running on your local machine:

1. Clone the Repository

git clone https://github.com/jishantukripal/Gradient-Generator.git
cd gradient-generator

2. Install Dependencies

npm install

3. Start the App

npm run dev

🏆 Contributing

Contributions are always welcome! Feel free to open an issue or submit a pull request. 💡

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature-branch).
  3. Make your changes and commit (git commit -m 'Add new feature').
  4. Push to the branch (git push origin feature-branch).
  5. Open a pull request.

Enjoy generating beautiful gradients! 🌈✨