{"id":37829249,"url":"https://github.com/zeevallin/gradient","last_synced_at":"2026-01-16T15:47:44.160Z","repository":{"id":56875083,"uuid":"46430057","full_name":"zeevallin/gradient","owner":"zeevallin","description":"Library for dealing with color gradients in ruby","archived":false,"fork":false,"pushed_at":"2022-08-05T12:27:50.000Z","size":405,"stargazers_count":17,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-14T00:19:52.165Z","etag":null,"topics":["adobe-photoshop-gradient","color-gradient","css","gradient","gradient-map","opacity","photoshop","point-vectors","ruby"],"latest_commit_sha":null,"homepage":"http://rubygems.org/gems/gradient","language":"Ruby","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/zeevallin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-18T16:02:49.000Z","updated_at":"2021-12-29T13:16:59.000Z","dependencies_parsed_at":"2022-08-20T10:11:05.982Z","dependency_job_id":null,"html_url":"https://github.com/zeevallin/gradient","commit_stats":null,"previous_names":["zeeraw/gradient"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/zeevallin/gradient","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeevallin%2Fgradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeevallin%2Fgradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeevallin%2Fgradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeevallin%2Fgradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeevallin","download_url":"https://codeload.github.com/zeevallin/gradient/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeevallin%2Fgradient/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28479409,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T11:59:17.896Z","status":"ssl_error","status_checked_at":"2026-01-16T11:55:55.838Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["adobe-photoshop-gradient","color-gradient","css","gradient","gradient-map","opacity","photoshop","point-vectors","ruby"],"created_at":"2026-01-16T15:47:43.989Z","updated_at":"2026-01-16T15:47:44.112Z","avatar_url":"https://github.com/zeevallin.png","language":"Ruby","readme":"# Gradient\n[![Not Maintained](https://img.shields.io/maintenance/no/2016.svg)](https://github.com/zeeraw/gradient)\n[![Gem Version](https://badge.fury.io/rb/gradient.svg)](https://badge.fury.io/rb/gradient)\n[![Build Status](https://travis-ci.org/zeeraw/gradient.svg?branch=master)](https://travis-ci.org/zeeraw/gradient)\n\nLibrary for dealing with color gradients in ruby\n\n## Usage\nGradient works by placing point vectors along a one dimensional plane.\nStart by creating a few points and pass them to a gradient map.\n\n```ruby\ngradient = Gradient::Map.new(\n  Gradient::Point.new(0, Color::RGB.new(32, 36, 196), 1.0),\n  Gradient::Point.new(0.49, Color::RGB.new(14, 250, 211), 0.1),\n  Gradient::Point.new(0.50, Color::RGB.new(171, 25, 12), 0.7),\n  Gradient::Point.new(1, Color::RGB.new(15, 212, 162), 0.3)\n)\n# =\u003e #\u003cGradient Map #\u003cPoint 0 #2024c4ff\u003e #\u003cPoint 49.0 #0efad31a\u003e #\u003cPoint 50.0 #ab190cb3\u003e #\u003cPoint 100 #0fd4a24d\u003e\u003e\n```\n\n### Convert to CSS\nIf you use ruby to serve web content you can use Gradient to convert gradient maps in to [CSS3 Gradients](http://www.w3schools.com/css/css3_gradients.asp)\n\n```ruby\ngradient.to_css\n# =\u003e \"background:linear-gradient(to right, rgba(30,87,153,1.0) 0%, rgba(41,137,216,0.02) 49%, rgba(37,131,209,0.0) 50%, rgba(32,124,202,0.02) 51%, rgba(125,185,232,1.0) 100%);\"\n\ngradient.to_css(property: \"border-image\")\n# =\u003e \"border-image:linear-gradient(to right, rgba(30,87,153,1.0) 0%, rgba(41,137,216,0.02) 49%, rgba(37,131,209,0.0) 50%, rgba(32,124,202,0.02) 51%, rgba(125,185,232,1.0) 100%);\"\n```\n\nIf you want some more control of the css generation you can invoke the CSS Printer manually.\n\n```ruby\nprinter = Gradient::CSSPrinter.new(gradient)\nprinter.linear\n# =\u003e \"linear-gradient(to right, rgba(30,87,153,1.0) 0%, rgba(41,137,216,0.02) 49%, rgba(37,131,209,0.0) 50%, rgba(32,124,202,0.02) 51%, rgba(125,185,232,1.0) 100%)\"\n\nprinter.linear(direction: \"to bottom\")\n# =\u003e \"linear-gradient(to bottom, rgba(30,87,153,1.0) 0%, rgba(41,137,216,0.02) 49%, rgba(37,131,209,0.0) 50%, rgba(32,124,202,0.02) 51%, rgba(125,185,232,1.0) 100%)\"\n\nprinter.radial(shape: :circle)\n# =\u003e \"radial-gradient(circle, rgba(30,87,153,1.0) 0%, rgba(41,137,216,0.02) 49%, rgba(37,131,209,0.0) 50%, rgba(32,124,202,0.02) 51%, rgba(125,185,232,1.0) 100%)\"\n```\n\n### Serialize \u0026 deserialize gradients\nTo store your gradients in something like a document database,\nyou're able to convert a gradient to primitives using `Gradient::Map#serialize`.\n\n```ruby\nGradient::Map.new(\n  Gradient::Point.new(0, Color::RGB.new(221, 189, 82), 1.0),\n  Gradient::Point.new(1, Color::RGB.new(89, 12, 72), 0.3)\n).serialize\n# =\u003e [[0, \"rgb\", [221, 189, 82], 1.0], [1, \"rgb\", [89, 12, 72], 0.3]]\n\n```\n\nYou can easily turn them back in to ruby objects by using `Gradient::Map.deserialize`.\n\n```ruby\nGradient::Map.deserialize([[0, \"rgb\", [221, 189, 82], 1.0], [1, \"rgb\", [89, 12, 72], 0.3]])\n# =\u003e #\u003cGradient Map #\u003cPoint 0 #ddbd52ff\u003e #\u003cPoint 100 #590c484d\u003e\u003e\n```\n\n### Import Adobe Photoshop gradient (`.grd`) files\nFor many artists, a preferred way of creating gradients is through Photoshop.\nYou are able to parse `.grd` files and turn them in to a hash of `Gradient::Map` objects.\n\n```ruby\nGradient::GRD.read(\"./kiwi.grd\")\n# =\u003e {\n#   \"Kiwi\"=\u003e #\u003cGradient Map #\u003cPoint 0.0 #3d1103ff\u003e #\u003cPoint 38.6 #29860dff\u003e #\u003cPoint 84.0 #a0cb1bff\u003e #\u003cPoint 92.7 #f3f56eff\u003e #\u003cPoint 100.0 #ffffffff\u003e\u003e\n# }\n```\n\n### Import SVG gradients\nSVG images can contain multiple gradients, and these can be extracted in the same\nway as for [`.grd`](#import-adobe-photoshop-gradient-grd-files) files.\n\n```ruby\nGradient::SVG.read(\"./lemon-lime.svg\")\n# =\u003e {\n#   \"Lemon-Lime\"=\u003e #\u003cGradient Map #\u003cPoint 0.0 #ffff00ff\u003e #\u003cPoint 20.0 #ffff00ff\u003e #\u003cPoint 50.0 #00ff00ff\u003e #\u003cPoint 80.0 #ffff00ff\u003e #\u003cPoint 100.0 #ffff00ff\u003e\u003e}\"\n# }\n```\n\n### Separate point vectors for opacity and color\nYou're able to control the point vectors for color and opacity separately by using a point merger.\n\n```ruby\ncolor_points = [\n  Gradient::ColorPoint.new(0, Color::RGB.new(30, 87, 153)),\n  Gradient::ColorPoint.new(0.49, Color::RGB.new(41, 137, 216)),\n  Gradient::ColorPoint.new(0.51, Color::RGB.new(32, 124, 202)),\n  Gradient::ColorPoint.new(1, Color::RGB.new(125, 185, 232)),\n]\n\nopacity_points = [\n  Gradient::OpacityPoint.new(0, 1),\n  Gradient::OpacityPoint.new(0.5, 0),\n  Gradient::OpacityPoint.new(1, 1)\n]\n\npoints = Gradient::PointMerger.new(color_points, opacity_points).call\n\ngradient = Gradient::Map.new(points)\n# =\u003e #\u003cGradient Map #\u003cPoint 0 #1e5799ff\u003e #\u003cPoint 49.0 #2989d805\u003e #\u003cPoint 50.0 #2583d100\u003e #\u003cPoint 51.0 #207cca05\u003e #\u003cPoint 100 #7db9e8ff\u003e\u003e\n```\n\n### Interpolation\nOne can find the color and opacity at an arbitrary location using the `#at` method, which returns a new `Gradient::Point`.\n\n```ruby\nmap = Gradient::Map.new(\n  Gradient::Point.new(0, Color::RGB.new(0, 128, 255), 1.0),\n  Gradient::Point.new(1, Color::RGB.new(255, 128, 0), 0.0)\n)\nmap.at(0.5)\n# =\u003e #\u003cPoint 50.0 #80808080\u003e\n```\n\n### Get hexadecimal color\nYou can get the hexadecimal color from a `Gradient::Point` with `.color.hex`, example:\n\n```ruby\nmap = Gradient::Map.new(\n  Gradient::Point.new(0, Color::RGB.new(255, 255, 255), 1.0),\n  Gradient::Point.new(1, Color::RGB.new(226, 82, 82), 1.0)\n)\nmap.at(0.5).color.hex \n```\n\n## Installation\nAdd this line to your application's Gemfile:\n\n```ruby\ngem \"gradient\"\n```\n\nAnd then execute:\n\n```bash\n$ bundle\n```\n\nOr install it yourself as:\n\n```bash\n$ gem install gradient\n```\n\n## Development\nAfter checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.\nTo install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).\n\n## Contributing\nBug reports and pull requests are welcome on GitHub at https://github.com/zeeraw/gradient. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.\n\n## License\nThe gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n\n## Acknowledgments\nValek Filippov and the RE-lab team decoded the `.grd` file format and provided\nan [initial parser implementation](https://gitorious.org/re-lab/graphics/source/781a65604d405f29c2da487820f64de8ddb0724d:photoshop/grd).\n[Andy Boughton](https://github.com/abought) later created an [implementation in python](https://github.com/abought/grd_to_cmap) which is the base for this library's implementation.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeevallin%2Fgradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeevallin%2Fgradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeevallin%2Fgradient/lists"}