{"id":19981410,"url":"https://github.com/peterekepeter/image-to-gradient","last_synced_at":"2025-05-04T05:32:06.688Z","repository":{"id":18415018,"uuid":"84237898","full_name":"peterekepeter/image-to-gradient","owner":"peterekepeter","description":"Convert images to CSS gradients.","archived":false,"fork":false,"pushed_at":"2024-02-25T17:51:46.000Z","size":490,"stargazers_count":27,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-28T14:51:01.331Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peterekepeter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-03-07T19:30:08.000Z","updated_at":"2025-04-01T21:03:14.000Z","dependencies_parsed_at":"2024-01-13T17:42:32.454Z","dependency_job_id":"54a0eeb6-8b16-4f5a-9ac6-917f1632fb82","html_url":"https://github.com/peterekepeter/image-to-gradient","commit_stats":{"total_commits":47,"total_committers":5,"mean_commits":9.4,"dds":"0.21276595744680848","last_synced_commit":"0ccbccc440e3eb54d52059f5373cbb2fabfab60a"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterekepeter%2Fimage-to-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterekepeter%2Fimage-to-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterekepeter%2Fimage-to-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peterekepeter%2Fimage-to-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peterekepeter","download_url":"https://codeload.github.com/peterekepeter/image-to-gradient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252293082,"owners_count":21724960,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-13T03:48:15.146Z","updated_at":"2025-05-04T05:32:06.310Z","avatar_url":"https://github.com/peterekepeter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\r\n# image-to-gradient\r\n\r\n[![Downloads pe Month](https://img.shields.io/npm/dm/image-to-gradient.svg)](https://www.npmjs.com/package/image-to-gradient)\r\n[![Total Downloads](https://img.shields.io/npm/dt/image-to-gradient.svg)](https://www.npmjs.com/package/image-to-gradient)\r\n[![Node CI](https://github.com/peterekepeter/image-to-gradient/actions/workflows/nodejs.yml/badge.svg)](https://github.com/peterekepeter/image-to-gradient/actions/workflows/nodejs.yml)\r\n[![Node.js Package](https://github.com/peterekepeter/image-to-gradient/actions/workflows/npmpublish.yml/badge.svg)](https://github.com/peterekepeter/image-to-gradient/actions/workflows/npmpublish.yml)\r\n[![Known Vulnerabilities](https://snyk.io/test/github/peterekepeter/image-to-gradient/badge.svg)](https://snyk.io/test/github/peterekepeter/image-to-gradient)\r\n\r\nThis project allows you to easily create CSS gradients from images. The step \r\ncount is variable. Any angle is supported. Alpha channel is also processed.\r\n\r\n![alt tag](example.png)\r\n\r\n\r\n## Usage\r\n\r\nThere is one exported function with 3 parameters. You specify the path through\r\nthe first parameter, you pass in the options in the second parameter and you\r\npass in a callback function in the third parameter;\r\n\r\nThe example below creates a gradient from an image and generates a dummy html\r\nfile with the background set to the gradient.\r\n\r\n```js\r\n    var imageToGradient = require('image-to-gradient');\r\n\r\n    var options = {\r\n        angle:10, // gradient angle in degrees\r\n        steps:64  // number of steps\r\n    }\r\n\r\n    imageToGradient('testimage.jpg', options, function(err, cssGradient){\r\n        if (err) throw err;\r\n        var html = `\r\n        \u003chtml\u003e\r\n            \u003chead\u003e\r\n                \u003cstyle\u003e\r\n                    html{\r\n                        width:100%;\r\n                        height:100%;\r\n                        background:${cssGradient};\r\n                    }\r\n                \u003c/style\u003e    \r\n            \u003c/head\u003e\r\n            \u003cbody\u003e\r\n            \u003c/body\u003e\r\n        \u003c/html\u003e`\r\n        var fs = require('fs');\r\n        fs.writeFile('output.html', html, (err) =\u003e {\r\n            if (err) throw err;\r\n            console.log('The file has been saved!');\r\n        });\r\n    });\r\n```\r\n\r\n\r\n## What can I use it for?\r\n\r\n[Here is an example how to speed up initial load!](https://mollwe.se/2017/12/15/hexo-lazy/)\r\n\r\n - Need a background? Create a gradient from an image.\r\n - Optimise site loading speed by initially replacing images with gradients.\r\n - Make art! The gradients are beautiful.\r\n - Need a palette? Create a gradient form an image, use it as a palette.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterekepeter%2Fimage-to-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeterekepeter%2Fimage-to-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeterekepeter%2Fimage-to-gradient/lists"}