{"id":13398046,"url":"https://github.com/noeldelgado/text-gradient","last_synced_at":"2025-10-05T16:25:37.197Z","repository":{"id":143801881,"uuid":"42394991","full_name":"noeldelgado/text-gradient","owner":"noeldelgado","description":":lollipop: Apply text gradients with CSS, inline SVG mask fallback or a solid color as last resort.","archived":false,"fork":false,"pushed_at":"2017-07-26T01:45:08.000Z","size":115,"stargazers_count":33,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-30T20:08:06.041Z","etag":null,"topics":["javascript","text-gradient","text-gradients"],"latest_commit_sha":null,"homepage":"https://noeldelgado.github.io/text-gradient/","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/noeldelgado.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-09-13T12:28:21.000Z","updated_at":"2025-03-25T07:49:27.000Z","dependencies_parsed_at":"2024-01-18T10:23:09.745Z","dependency_job_id":"2ec66d7f-10a6-4028-96cc-ab04e7210d04","html_url":"https://github.com/noeldelgado/text-gradient","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Ftext-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Ftext-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Ftext-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noeldelgado%2Ftext-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noeldelgado","download_url":"https://codeload.github.com/noeldelgado/text-gradient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251774896,"owners_count":21641731,"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":["javascript","text-gradient","text-gradients"],"created_at":"2024-07-30T18:02:03.752Z","updated_at":"2025-10-05T16:25:32.145Z","avatar_url":"https://github.com/noeldelgado.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# text-gradient\n[![npm-image](https://img.shields.io/npm/v/text-gradient.svg?style=flat-square)](https://www.npmjs.com/package/text-gradient)\n\n*Vanilla js version of [javierbyte's][0] – [react-textgradient][1].*\n\nApply text gradients with CSS, inline SVG mask fallback or a solid color as last resort.\n\n**Note:** Not recommended for large amounts of text, most suitable for headings and the like.\n\n[Demo](https://noeldelgado.github.io/text-gradient/)\n\n[![text-gradient](screenshot.png)](http://noeldelgado.github.io/text-gradient/)\n\n## Features\n- Uses CSS text gradients when possible (Chrome, Safari, iOS, android).\n- Fallbacks to SVG masking on Firefox `url(#gradient)`.\n- The text remains controlled via CSS (font size, family, weight, text-align, line-height, etc...)\n\n## Install\n```sh\nnpm install text-gradient --save\n```\n\n## Usage\n```\n@argument element \u003crequired\u003e [NodeElement] the element to apply the gradient\n@argument options \u003coptional\u003e [Object] Gradient color-stops, direction, text.\n```\n\n```js\nconst TextGradient = require('text-gradient');\n\nconst gradient = new TextGradient(document.getElementById('headline'), {\n  from: '#B0E537',\n  to: '#009DE9',\n  direction: 'right'\n});\n```\n\n## Options\n\n| name | type | default | description |\n|:--- |:--- |:---|:---|\n| text | String | `element.textContent` | The text to display |\n| from | String (valid color format) | `transparent` | Gradient's first color-stop |\n| to | String (valid color format) | `transparent` | Gradient's last color-stop |\n| direction | String | `right` | One of (top, right, bottom, left) |\n\n\n## API\n### updateText(String)\n\nChanges the text contents.\n\n```js\n/*\n * @argument text \u003crequired\u003e [String]\n * @return undefined\n */\ngradient.updateText('Some other catchy headline');\n```\n\n### destroy()\n\nRemove the text-gradient effect, references and elements created by the instance (svg container, defs, extra spans to wrap the content, etc).\n\n```js\n/*\n * @return null\n */\ngradient = gradient.destroy();\n```\n\n## License\nMIT © [Noel Delgado](http://pixelia.me/)\n\n[0]: https://github.com/javierbyte\n[1]: https://github.com/javierbyte/react-textgradient\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoeldelgado%2Ftext-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoeldelgado%2Ftext-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoeldelgado%2Ftext-gradient/lists"}