Gradient Generator

A simple and interactive Gradient Generator built with HTML, CSS, and JavaScript. This tool allows users to create linear gradients, generate random gradients, and copy the CSS code for their designs.

Features

• Custom Gradients: Select two colors and a direction to create a linear gradient.
• Random Gradients: Generate random gradients with a single click.
• Copy CSS Code: Copy the generated gradient's CSS code to your clipboard for easy use.
• Real-Time Preview: Instantly preview the gradient on the webpage.

Demo

Check out here - Gradient Generator

How to Use

1. Clone or download this repository to your local machine.
2. Open the index.html file in your browser.
3. Use the color pickers to select your desired colors.
4. Choose a gradient direction from the dropdown menu.
5. Click Generate Gradient to see your gradient in action.
6. Alternatively, click Generate Random to create a random gradient.
7. Click Copy CSS to copy the gradient's CSS code to your clipboard.

Installation

No installation is required! Just download the files and open the index.html file in any modern web browser.

Files Structure

GradientGenerator/
│
├── index.html        # HTML structure for the gradient generator
├── styles.css        # Styling for the application
└── script.js         # JavaScript for interactivity

Technologies Used

• HTML5: Structure of the webpage.
• CSS3: Styling the application and previewing gradients.
• JavaScript: Adding interactivity for gradient generation and clipboard functionality.

Example CSS Output

Here’s an example of the CSS code generated by this tool:

background: linear-gradient(to right, #ff0000, #0000ff);

Future Improvements

• Add radial gradient support.
• Enable gradient saving as an image.
• Add more customizable options (e.g., opacity, more color stops).

Contributing

Contributions are welcome! If you have suggestions or improvements, feel free to fork the repository and submit a pull request.