{"id":13907299,"url":"https://github.com/javierbyte/react-textgradient","last_synced_at":"2025-04-22T09:32:45.348Z","repository":{"id":28707094,"uuid":"32227650","full_name":"javierbyte/react-textgradient","owner":"javierbyte","description":"Text gradients with CSS with SVG fallback. [unmaintained]","archived":false,"fork":false,"pushed_at":"2020-11-22T23:08:24.000Z","size":513,"stargazers_count":123,"open_issues_count":2,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-01T22:11:36.664Z","etag":null,"topics":["design","frontend","javascript","react"],"latest_commit_sha":null,"homepage":"https://javier.xyz/react-textgradient/","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/javierbyte.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}},"created_at":"2015-03-14T19:12:36.000Z","updated_at":"2024-09-22T14:58:47.000Z","dependencies_parsed_at":"2022-07-24T16:02:02.134Z","dependency_job_id":null,"html_url":"https://github.com/javierbyte/react-textgradient","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierbyte%2Freact-textgradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierbyte%2Freact-textgradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierbyte%2Freact-textgradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierbyte%2Freact-textgradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javierbyte","download_url":"https://codeload.github.com/javierbyte/react-textgradient/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250215358,"owners_count":21393785,"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":["design","frontend","javascript","react"],"created_at":"2024-08-06T23:01:52.728Z","updated_at":"2025-04-22T09:32:45.076Z","avatar_url":"https://github.com/javierbyte.png","language":"JavaScript","readme":"# [React Text Gradient.](http://javierbyte.github.io/react-textgradient/)\n\n## UNMAINTAINED\n\nUnmantained for now.\n\nIt seems that there are modern ways to do this, see https://css-tricks.com/snippets/css/gradient-text/\n\n---\n\nA React component that creates text gradients with CSS, including a SVG fallback.\n\n[Live demo.](http://javierbyte.github.io/react-textgradient/)\n\n[![react-textgradient](screenshot.png)](http://javierbyte.github.io/react-textgradient/)\n\n# Features.\n* Uses CSS gradients when possible (Chrome, Safari, iOS, Android).\n* Uses SVG as fallback on Firefox.\n* The text remains as fluid text (never replaced with svg).\n* Font size, family, weight, etc... controlled by CSS as normal.\n\n# Installation.\n\n```js\nnpm install react-textgradient --save\n```\n\n# Usage.\n\nFirst, require the component\n\n```js\nvar TextGradient = require('react-textgradient');\n```\n\nAnd then use it like this:\n\n```jsx\n\u003cTextGradient\n  text='React Text Gradient'\n  fromColor='#FFFF00'\n  toColor='#FF8008'\n  direction='right' /\u003e\n```\n\n And you will get the example of the start of the page.\n\n## Props.\n\n* `text`: The content.\n* `fromColor`: The initial color for the gradient. Can be any valid color for CSS and SVG (HEX, RGBA, RGB, etc...).\n* `toColor` The final color of the gradient.\n* `fallbackColor`: The color to display on unsupported browsers. Optional, defaults to `toColor`.\n* `direction`: One from 'top', 'left', 'bottom', 'right'. Optional, defaults to 'right'.\n\n## Roadmap.\n* Support for radial gradients.\n* Arbitrary gradient direction.\n","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavierbyte%2Freact-textgradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavierbyte%2Freact-textgradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavierbyte%2Freact-textgradient/lists"}