{"id":13626389,"url":"https://github.com/cristicretu/meshgrad","last_synced_at":"2025-12-27T03:52:05.099Z","repository":{"id":53866311,"uuid":"521740666","full_name":"cristicretu/meshgrad","owner":"cristicretu","description":"🎨 Generate CSS Mesh Gradients","archived":false,"fork":false,"pushed_at":"2023-11-18T19:58:53.000Z","size":7449,"stargazers_count":82,"open_issues_count":2,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-02T22:25:24.754Z","etag":null,"topics":["css-gradients","gradient","gradient-generator","mesh-gradient"],"latest_commit_sha":null,"homepage":"https://meshgrad.cretu.dev","language":"TypeScript","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/cristicretu.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}},"created_at":"2022-08-05T18:32:16.000Z","updated_at":"2024-07-17T11:19:06.000Z","dependencies_parsed_at":"2024-01-14T07:19:02.392Z","dependency_job_id":null,"html_url":"https://github.com/cristicretu/meshgrad","commit_stats":{"total_commits":18,"total_committers":2,"mean_commits":9.0,"dds":0.05555555555555558,"last_synced_commit":"d9e94a1a1528f21caea85e146466be3d0d00d75f"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristicretu%2Fmeshgrad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristicretu%2Fmeshgrad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristicretu%2Fmeshgrad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cristicretu%2Fmeshgrad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cristicretu","download_url":"https://codeload.github.com/cristicretu/meshgrad/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223716500,"owners_count":17191055,"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-gradients","gradient","gradient-generator","mesh-gradient"],"created_at":"2024-08-01T21:02:17.010Z","updated_at":"2025-12-27T03:52:05.057Z","avatar_url":"https://github.com/cristicretu.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"./website/public/static/og.png\" /\u003e\n\u003c/p\u003e\n\n# 🎨 Meshgrad ![meshgrad minzip package size](https://img.shields.io/bundlephobia/minzip/meshgrad) ![meshgrad package version](https://img.shields.io/npm/v/meshgrad.svg?colorB=blue)\n\nMeshgrad is a tiny utility to generate native-CSS Mesh Gradients.\n\n[Demo - meshgrad.cretu.dev](https://meshgrad.cretu.dev/)\n\n## Install\n\n```bash\n$ npm install meshgrad\n```\n\n## Use\n\n### Options:\n\n- length: _number_ - ammount of color stops\n- baseColor: _string_ - hex string that specifies the root color\n- hash: _number_ - specify a number that will generate the same position each time\n\n### Vanilla Javascript\n\n```js\n\u003cscript type=\"module\"\u003e\n  import { generateMeshGradient } from \"https://cdn.skypack.dev/meshgrad\";\n\n  // Number of color stops\n  const ELEMENTS = 6;\n\n  document.getElementById(\"box\");\n  box.style = generateMeshGradient(ELEMENTS);\n\u003c/script\u003e\n\n\u003cdiv id=\"box\" class=\"...\" /\u003e\n```\n\n### Svelte\n\n```js\n\u003cscript\u003e\nimport { generateMeshGradient } from 'meshgrad';\n\n// Number of color stops\nconst ELEMENTS = 6;\n\u003c/script\u003e\n\n\u003cdiv style={generateMeshGradient(ELEMENTS)} class=\"...\"/\u003e\n```\n\n### React JSX\n\n```jsx\nimport { generateJSXMeshGradient } from \"meshgrad\";\n\n// Number of color stops\nconst ELEMENTS = 6;\n\nexport function App() {\n  return \u003cdiv style={generateJSXMeshGradient(ELEMENTS)} className=\"...\" /\u003e;\n}\n```\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcristicretu%2Fmeshgrad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcristicretu%2Fmeshgrad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcristicretu%2Fmeshgrad/lists"}