Gradient Generator JS

Gradient Generator JS is a simple and interactive web application that allows users to create stunning gradient backgrounds with ease. The application generates unique gradients and enables users to copy the CSS code for use in their projects.

Features

• Random Gradient Colors: Click buttons to generate random colors for a linear gradient.
• Live Preview: The background updates instantly with the new gradient.
• Copy Gradient Code: Easily copy the generated gradient's CSS code with a single click.
• Responsive Design: Works seamlessly across different devices and screen sizes.

Preview

(Above: A demonstration of the Gradient Generator in action)

How It Works

1. Select Colors: Click on the two color buttons to generate random colors.
2. Generate Gradient: The application combines the two colors into a linear gradient and applies it to the background.
3. Copy Gradient: Click on the gradient text to copy the CSS code to your clipboard.

Project Structure

• index.html: Defines the structure and layout of the webpage.
• styles.css: Provides styling for the webpage, including background, buttons, and text.
• script.js: Contains JavaScript logic for generating random colors, updating the background, and copying the gradient CSS code.

Getting Started

Prerequisites

• A modern web browser (e.g., Chrome, Firefox, Edge).

Steps

1. Clone this repository or download the source files.
2. Open index.html in your browser.
3. Interact with the application to generate and copy gradients.

Code Overview

Core Logic (script.js)

• Random Color Generation: Generates a random hexadecimal color code.
• Event Listeners: Handles button clicks to update colors and copy the gradient.
• Clipboard API: Copies the generated CSS gradient code to the clipboard.

Styling (styles.css)

• A sleek and modern design with rounded buttons, transparent overlays, and responsive layout.

Markup (index.html)

• A user-friendly interface with sections for title, buttons, and gradient code display.

Usage

Feel free to use this gradient generator for:

• Web development projects
• UI/UX design inspiration
• Learning purposes

Contributing

Contributions are welcome! If you have ideas to improve this project, feel free to fork the repository and submit a pull request.

License

This project is open-source and available under the MIT License.

---

Happy Gradient Crafting! 🌈