https://github.com/surajgharpankar28/gradientgenerator
A simple and interactive Gradient Generator built with HTML, CSS, and JavaScript.
https://github.com/surajgharpankar28/gradientgenerator
beautiful colortool css gradient html-css-javascript html5 javascript
Last synced: 3 months ago
JSON representation
A simple and interactive Gradient Generator built with HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/surajgharpankar28/gradientgenerator
- Owner: surajgharpankar28
- Created: 2025-01-10T10:24:05.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-15T15:12:24.000Z (5 months ago)
- Last Synced: 2025-01-19T08:32:25.824Z (5 months ago)
- Topics: beautiful, colortool, css, gradient, html-css-javascript, html5, javascript
- Language: JavaScript
- Homepage: https://gradient-code-generator.vercel.app/
- Size: 28.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://gradient-code-generator.vercel.app/)
## 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:
```css
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.