Effortlessly create and copy beautiful CSS gradients!
This is a powerful and intuitive web application built with Next.js and Tailwind CSS that allows you to generate stunning CSS gradients on the fly. You can customize colors, opacity, and gradient type to create the perfect background for your website or project.
- 🎨 Live Preview: See your gradient change in real-time as you adjust settings.
- 🌈 Customizable Colors: Choose two colors with a modern color picker.
- ✨ Opacity Control: Fine-tune the transparency of each color for unique effects.
- 📐 Adjustable Angle: Set the direction of your linear gradient from 0° to 360°.
- 🔄 Multiple Gradient Types: Switch between
linear,radial, andconicgradients. - 🎲 Random Generator: Get inspired with a click of a button to create a random gradient.
- 📋 Instant CSS Code: The complete CSS code is automatically generated and ready to copy.
- 🚀 Responsive Design: The app is fully responsive and looks great on all devices.
This project is built using modern web technologies to ensure a fast and smooth user experience.
- Next.js: A React framework for building fast and scalable web applications.
- React: A JavaScript library for building user interfaces.
- Tailwind CSS: A highly-customizable, low-level CSS framework for rapid UI development.
Follow these steps to set up the project locally.
You need to have Node.js and npm (or yarn) installed on your machine.
- Clone the repository:
git clone https://github.com/AhmedAbdoDev/Gradient-Background-Generator.git
- Navigate to the project directory:
cd Gradient-Background-Generator - Install the dependencies:
npm install # or yarn
Run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 in your browser to see the result.
Ahmed Abd El-Latif Mostafa
I'm a passionate solo developer who enjoys building simple yet effective tools. If you have any questions or feedback, feel free to connect with me!