[
{
"path": ".github/dependabot.yml",
"content": "version: 2\nupdates:\n - package-ecosystem: npm\n directory: \"/\"\n schedule:\n interval: daily\n assignees:\n - mistic100\n commit-message:\n prefix: 'chore'\n include: 'scope'\n - package-ecosystem: github-actions\n directory: '/'\n schedule:\n interval: weekly\n assignees:\n - mistic100\n commit-message:\n prefix: 'chore'\n include: 'scope'\n \n"
},
{
"path": ".github/workflows/main.yml",
"content": "name: CI\n\non: [push, pull_request]\n\njobs:\n build:\n\n runs-on: ubuntu-latest\n \n steps:\n - uses: actions/checkout@v4\n - name: build\n run: |\n npm install\n npm run test\n"
},
{
"path": ".gitignore",
"content": ".idea\n*.iml\nnode_modules\nyarn.lock\nyarn-error.log\n"
},
{
"path": "LICENSE",
"content": "The MIT License (MIT)\n\nCopyright (c) 2014-2025 Damien Sorel\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# tinygradient\n\n[](https://www.npmjs.com/package/tinygradient)\n[](https://www.jsdelivr.com/package/npm/tinygradient)\n[](https://bundlephobia.com/result?p=tinygradient)\n[](https://github.com/mistic100/tinygradient/actions)\n\nEasily generate color gradients with an unlimited number of color stops and steps. \n\n[Live demo](https://mistic100.github.io/tinygradient/)\n\n## Installation\n\n```\n$ npm install tinygradient\n```\n\n### Dependencies\n\n- [TinyColor](https://github.com/bgrins/TinyColor)\n\n## Usage\n\nThe gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.\n\n### Initialize gradient\n\nThe `tinygradient` constructor takes a list or an array of colors stops.\n\n```javascript\n// using varargs\nconst gradient = tinygradient('red', 'green', 'blue');\n\n// using array\nconst gradient = tinygradient([\n '#ff0000',\n '#00ff00',\n '#0000ff'\n]);\n```\n\nThe colors are parsed with TinyColor, [multiple formats are accepted](https://github.com/bgrins/TinyColor/blob/master/README.md#accepted-string-input).\n\n```javascript\nconst gradient = tinygradient([\n tinycolor('#ff0000'), // tinycolor object\n {r: 0, g: 255, b: 0}, // RGB object\n {h: 240, s: 1, v: 1, a: 1}, // HSVa object\n 'rgb(120, 120, 0)', // RGB CSS string\n 'gold' // named color\n]);\n```\n\nYou can also specify the position of each color stop (between `0` and `1`). If no position is specified, stops are distributed equidistantly.\n\n```javascript\nconst gradient = tinygradient([\n {color: '#d8e0de', pos: 0},\n {color: '#255B53', pos: 0.8},\n {color: '#000000', pos: 1}\n]);\n```\n\n### Generate gradient\n\nEach method takes at least the number of desired steps.\n> The generated gradients might have one more step in certain conditions.\n\n```javascript\n// RGB interpolation\nconst colorsRgb = gradient.rgb(9);\n```\n\n\n```javascript\n// HSV clockwise interpolation\nconst colorsHsv = gradient.hsv(9);\n```\n\n\n```javascript\n// HSV counter-clockwise interpolation\nconst colorsHsv = gradient.hsv(9, true);\n```\n\n\nThere are also two methods which will automatically choose between clockwise and counter-clockwise.\n\n```javascript\n// HSV interpolation using shortest arc between colors\nconst colorsHsv = gradient.hsv(9, 'short');\n\n// HSV interpolation using longest arc between colors\nconst colorsHsv = gradient.hsv(9, 'long');\n```\n\nEach method returns an array of TinyColor objects, [see available methods](https://github.com/bgrins/TinyColor/blob/master/README.md#methods).\n\n### Get CSS gradient string\n\nThe `css` method will output a valid W3C string (without vendors prefix) to use with `background-image` CSS property.\n\n```javascript\n// linear gradient to right (default)\nconst gradientStr = gradient.css();\n\n// radial gradient ellipse at top left\nconst gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');\n```\n\n### Get color at a specific position\n\nReturns a single TinyColor object from a defined position in the gradient (from 0 to 1).\n\n```javascript\n// with RGB interpolation\ncolorAt55Percent = gradient.rgbAt(0.55);\n\n// with HSV interpolation\ncolorAt55Percent = gradient.hsvAt(0.55);\n```\n\n### Reversing gradient\n\nReturns a new instance of TinyGradient with reversed colors.\n\n```javascript\nconst reversedGradient = gradient.reverse();\n```\n\n### Loop the gradient\n\nReturns a new instance of TinyGradient with looped colors.\n\n```javascript\nconst loopedGradient = gradient.loop();\n```\n\n### Position-only stops\n\nI is possible to define stops with the `pos` property only and no `color`. This allows to define the position of the mid-point between the previous and the next stop.\n\n```js\nconst gradient = tinygradient([\n {color: 'black', pos: 0},\n {pos: 0.8}, // #808080 will be at 80% instead of 50%\n {color: 'white', pos: 1}\n]);\n```\n\n\n## License\nThis library is available under the MIT license.\n"
},
{
"path": "index.html",
"content": "\n\n\n \n\n tinygradient\n\n \n \n\n \n\n\n\n\n\n
![](\"https://octodex.github.com/images/original.png\")
GitHub\n