{"id":24380582,"url":"https://github.com/surajgharpankar28/gradientgenerator","last_synced_at":"2026-04-11T07:02:06.724Z","repository":{"id":271863309,"uuid":"914797524","full_name":"surajgharpankar28/GradientGenerator","owner":"surajgharpankar28","description":"A simple and interactive Gradient Generator built with HTML, CSS, and JavaScript.","archived":false,"fork":false,"pushed_at":"2025-02-04T11:38:12.000Z","size":31,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-16T15:36:46.365Z","etag":null,"topics":["beautiful","colortool","css","gradient","html-css-javascript","html5","javascript"],"latest_commit_sha":null,"homepage":"https://gradient-code-generator.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/surajgharpankar28.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-10T10:24:05.000Z","updated_at":"2025-02-04T11:38:15.000Z","dependencies_parsed_at":"2025-03-12T15:42:12.187Z","dependency_job_id":null,"html_url":"https://github.com/surajgharpankar28/GradientGenerator","commit_stats":null,"previous_names":["surajgharpankar28/gradientgenerator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/surajgharpankar28/GradientGenerator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surajgharpankar28%2FGradientGenerator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surajgharpankar28%2FGradientGenerator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surajgharpankar28%2FGradientGenerator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surajgharpankar28%2FGradientGenerator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/surajgharpankar28","download_url":"https://codeload.github.com/surajgharpankar28/GradientGenerator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/surajgharpankar28%2FGradientGenerator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31671630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beautiful","colortool","css","gradient","html-css-javascript","html5","javascript"],"created_at":"2025-01-19T08:27:28.866Z","updated_at":"2026-04-11T07:02:06.682Z","avatar_url":"https://github.com/surajgharpankar28.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gradient Generator\n\nA 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.\n\n## Features\n\n- **Custom Gradients**: Select two colors and a direction to create a linear gradient.\n- **Random Gradients**: Generate random gradients with a single click.\n- **Copy CSS Code**: Copy the generated gradient's CSS code to your clipboard for easy use.\n- **Real-Time Preview**: Instantly preview the gradient on the webpage.\n\n## Demo\n\nCheck out here -\n[Gradient Generator](https://gradient-code-generator.vercel.app/)\n\n## How to Use\n\n1. Clone or download this repository to your local machine.\n2. Open the `index.html` file in your browser.\n3. Use the color pickers to select your desired colors.\n4. Choose a gradient direction from the dropdown menu.\n5. Click **Generate Gradient** to see your gradient in action.\n6. Alternatively, click **Generate Random** to create a random gradient.\n7. Click **Copy CSS** to copy the gradient's CSS code to your clipboard.\n\n## Installation\n\nNo installation is required! Just download the files and open the `index.html` file in any modern web browser.\n\n## Files Structure\n\n```\nGradientGenerator/\n│\n├── index.html        # HTML structure for the gradient generator\n├── styles.css        # Styling for the application\n└── script.js         # JavaScript for interactivity\n```\n\n## Technologies Used\n\n- **HTML5**: Structure of the webpage.\n- **CSS3**: Styling the application and previewing gradients.\n- **JavaScript**: Adding interactivity for gradient generation and clipboard functionality.\n\n## Example CSS Output\n\nHere’s an example of the CSS code generated by this tool:\n\n```css\nbackground: linear-gradient(to right, #ff0000, #0000ff);\n```\n\n## Future Improvements\n\n- Add radial gradient support.\n- Enable gradient saving as an image.\n- Add more customizable options (e.g., opacity, more color stops).\n\n## Contributing\n\nContributions are welcome! If you have suggestions or improvements, feel free to fork the repository and submit a pull request.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurajgharpankar28%2Fgradientgenerator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsurajgharpankar28%2Fgradientgenerator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsurajgharpankar28%2Fgradientgenerator/lists"}