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. ✨
- 🖌️ 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.
Gradient Background Generator Demo
- ⚛️ 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.
- Generate Gradient: Hit the "Generate Random Gradient" button, and a random gradient is applied as the background of the app.
- Copy Tailwind CSS Code: The generated Tailwind CSS code is displayed in a box, click the code to copy it to your clipboard.
- Use It Anywhere: Paste the copied Tailwind CSS code in your project to apply the same gradient.
Follow these steps to get the project running on your local machine:
git clone https://github.com/jishantukripal/Gradient-Generator.git
cd gradient-generator
npm install
npm run dev
Contributions are always welcome! Feel free to open an issue or submit a pull request. 💡
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch
). - Make your changes and commit (
git commit -m 'Add new feature'
). - Push to the branch (
git push origin feature-branch
). - Open a pull request.
Enjoy generating beautiful gradients! 🌈✨