{"id":13394464,"url":"https://github.com/javierbyte/img2css","last_synced_at":"2025-05-15T11:00:16.308Z","repository":{"id":45831001,"uuid":"44371473","full_name":"javierbyte/img2css","owner":"javierbyte","description":"Convert any image to pure CSS. Recreates images using only box-shadows.","archived":false,"fork":false,"pushed_at":"2023-04-20T08:37:06.000Z","size":6181,"stargazers_count":2492,"open_issues_count":5,"forks_count":189,"subscribers_count":63,"default_branch":"main","last_synced_at":"2025-04-14T16:57:58.914Z","etag":null,"topics":["css","design","design-tool","frontend","img2css","javascript","pixel-art","react"],"latest_commit_sha":null,"homepage":"https://javier.xyz/img2css","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javierbyte.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2015-10-16T08:10:06.000Z","updated_at":"2025-04-12T06:31:41.000Z","dependencies_parsed_at":"2024-01-13T17:11:28.908Z","dependency_job_id":"23f4f696-7414-4f22-8665-0c3e56ee72fe","html_url":"https://github.com/javierbyte/img2css","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierbyte%2Fimg2css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierbyte%2Fimg2css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierbyte%2Fimg2css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierbyte%2Fimg2css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javierbyte","download_url":"https://codeload.github.com/javierbyte/img2css/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328384,"owners_count":22052632,"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":["css","design","design-tool","frontend","img2css","javascript","pixel-art","react"],"created_at":"2024-07-30T17:01:20.588Z","updated_at":"2025-05-15T11:00:16.236Z","avatar_url":"https://github.com/javierbyte.png","language":"JavaScript","readme":"# [img2css](https://javier.xyz/img2css/)\n\nConvert any image to pure CSS.\n\n[![img2css](public/img2css.jpg)](https://javier.xyz/img2css/)\n\n- To use it go to https://javier.xyz/img2css\n- Looking for a programmatic way to do this? See https://github.com/javierbyte/canvas-image-utils\n- I also made a per-pixel animation experiment, see https://github.com/javierbyte/morphin\n\n## How does it work?\n\nIt has two different outputs, pure css shadow matrix [1] and base64 embedded image [2].\n\n- **Pure CSS**: This output was created by resizing and setting each pixel as a box-shadow of a single pixel div, so no `img` tag or `background-image` is needed. This can result in huge outputs, and the use of this output is not recommended for production unless there is no other option.\n- **Base64**: The entire image file is embedded inside the `\u003cimg\u003e` tag using base64, so no need external hosting is needed.\n\n### Development\n\nRun development server:\n\n```\nnpm run dev\n```\n\nBuild\n\n```\nnpm run build\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavierbyte%2Fimg2css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavierbyte%2Fimg2css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavierbyte%2Fimg2css/lists"}