{"id":32325993,"url":"https://github.com/cjcoax/ccgradientview","last_synced_at":"2026-02-20T21:02:49.090Z","repository":{"id":56904301,"uuid":"189682882","full_name":"cjcoax/CCGradientView","owner":"cjcoax","description":"Lightweight, easy to use Gradient view for iOS","archived":false,"fork":false,"pushed_at":"2019-06-05T17:39:45.000Z","size":113,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-12T00:21:32.619Z","etag":null,"topics":["calayer","cocoapods","color","color-wheel","dribbble","gradient","ios","swift","uikit","uiview","xcode"],"latest_commit_sha":null,"homepage":"","language":"Swift","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/cjcoax.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}},"created_at":"2019-06-01T02:50:40.000Z","updated_at":"2025-03-22T00:23:58.000Z","dependencies_parsed_at":"2022-08-21T02:50:20.553Z","dependency_job_id":null,"html_url":"https://github.com/cjcoax/CCGradientView","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/cjcoax/CCGradientView","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cjcoax%2FCCGradientView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cjcoax%2FCCGradientView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cjcoax%2FCCGradientView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cjcoax%2FCCGradientView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cjcoax","download_url":"https://codeload.github.com/cjcoax/CCGradientView/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cjcoax%2FCCGradientView/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29664437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T19:49:36.704Z","status":"ssl_error","status_checked_at":"2026-02-20T19:44:05.372Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["calayer","cocoapods","color","color-wheel","dribbble","gradient","ios","swift","uikit","uiview","xcode"],"created_at":"2025-10-23T13:26:39.741Z","updated_at":"2026-02-20T21:02:49.085Z","avatar_url":"https://github.com/cjcoax.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://i.imgur.com/sZqOxs1.png\" alt=\"CCGradient\"/\u003e\n\u003c/p\u003e\n\nLightweight, easy to use Gradient view backed by GPU powered CoreAnimation's Layer, with [380+  built-in gradient colors, mostly ported from uigradients.](https://uigradients.com/)\n\n\n## Usage\n\n### Create configuration\n\n`CCGradientView` uses `CCGradientViewConfiguration` to configure\n- Colors.\n- Type (`axial`, `conic`, `radial`).\n- Locations: location of each color in gradient.\n- Points: starting and ending point at which each color starts and ends.\n\nYou can create configuration object using one the following ways:\n\u003cp\u003e\n\n1. Only uses colors, it'll automatically adjust \"Locations\" and \"Points\" based on number of colors. Default type will be axial\n\n```swift\nlet configWithColors = CCGradientConfiguration(colors: [UIColors])\n```\n\u003c/p\u003e\n\n\u003cp\u003e\n\n2. Same as above, it also takes CCGradient type which coule be \"axial\",\"radial\", or \"conic\"\n\n```swift\nlet configWithColorsAndType = CCGradientConfiguration(colors: [UIColors],\n                                                      type: CCGradientType)\n```\n\u003c/p\u003e\n\u003cp\u003e\n\n3. Same as above, it also takes locations which indicates area covered by each color. Each number on the array could be between 0 to 1, e.g. a gradient with two colors and locations = [0.25, 0.75] renders a gradient that has two colors, one of them covers 25% of view, the other 75%.\n\n```swift\nlet configWithColorsAndTypeAndLocations = CCGradientConfiguration(colors: [UIColor],\n                                                                  type: CCGradientType,\n                                                                  locations: [CGFloat])\n```\n\u003c/p\u003e\n\u003cp\u003e\n\n4. Same as above, it takes points array in addition to other parameters. This array needs to have two CGPoints and defined in a unit coordinate space (between [0,0] bottom left, [1,1] top right).\n```swift\nlet configWithColorsAndTypeAndLocationsAndPoints = CCGradientConfiguration(colors: [UIColor],\n                                                                           type: CCGradientType ,\n                                                                           locations: [CGFloat],\n                                                                           points: [CGPoint])\n\n```\n\u003c/p\u003e\n\u003cp\u003e\n\n5. Uses array of colors, plus `CCGradientDirection` which is one of the followings:\n```swift\npublic enum CCGradientDirection {\n    case topToBottom\n    case leftToRight\n    case rightToLeft\n    case bottomToTop\n    case growFromCenter\n    case shrinkToCenter\n}\n``` \nand intialize CCGradientConfiguration using it.\n\n```swift\nlet configWithColorsAndDirection = CCGradientConfiguration(colors: [UIColors], \n                                                           direction: CCGradientDirection)\n```\n\u003c/p\u003e\n\u003cp\u003e\n\n6. Same as above, it takes locations array too.\n\n```swift\nlet configWithColorsAndDirectionAndLocations = CCGradientConfiguration(colors: [UIColor],\n                                                                       direction: CCGradientDirection,\n                                                                       locations: [CGFloat])\n```\n\u003c/p\u003e\n\n### Adding the view\n\n1. Add a UIView to your scene in storyboard, change its class to be `CCGradientView`. Depending on how you've integrated it, you might need to change `Module` to be `CCGradient`. You can add the view from the code too. Just call `CCGradientView`s `init(frame: CGRect)`. \n2. Set `CCGradientView`'s configuration and implement the only configuration's method.\n\u003cp\u003e\n\n```swift\nfunc configurationForGradientView(_ gradientView: CCGradientView) -\u003e CCGradientConfiguration\n```\n\u003c/p\u003e\n\n\nHere is a complete example.\n\n```swift\nclass ViewController: UIViewController {\n    @IBOutlet weak var gradientView: CCGradientView!\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        //set configuration to be self\n        gradientView.configuration = self\n    }\n}\nextension ViewController: CCGradientViewConfiguration {    \n    func configurationForGradientView(_ gradientView: CCGradientView) -\u003e CCGradientConfiguration {\n        return CCGradientConfiguration(colors: CCGradientColors.Instagram,\n                                       direction: .rightToLeft)\n    }\n}\n```\n\u003cp\u003e\n\n### Ready to use Gradient colors\nCCGradient has 380+ ready to use gradients built in. They are ported from [https://github.com/Ghosh/uiGradients](https://github.com/Ghosh/uiGradients).\nYou can see most of the colors in here: [https://uigradients.com](https://uigradients.com)\nCredit to [Ghosh](https://github.com/Ghosh)\n\nTo use one of the ready gradient colors, you only need to [create a configuration](#create-configuration). For the color array you need to pass in one of the ready colors from `CCGradientColors` \n\n```swift\nlet configuration = CCGradientConfiguration(colors: CCGradientColors.MoonPurple)\n```\nAgain, you can see most of the gradient colors in here: https://uigradients.com\n\n\u003c/p\u003e\n\n### Getting creative\nYou can play with configuration and get things like color wheel.\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"http://i.imgur.com/kq4Cut6.png\" alt=\"color-wheel\" width=\"300\" height=\"300\"/\u003e\n\u003c/p\u003e\n\n```swift\nCCGradientConfiguration(colors: CCGradientColors.ColorWheel,\n                        type: CCGradientType.conic,\n                        points: [CGPoint(x: 0.5, y: 0.5),\n                        CGPoint(x: 1, y: 1)])\n```\n\nOr you can mask gradient views to get effects like following.\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"http://i.imgur.com/wYDUEVw.png\" alt=\"pride\" width=\"300\"/\u003e\n\u003c/p\u003e\n\n```swift\nclass ViewController: UIViewController {\n    @IBOutlet weak var gradientView: CCGradientView!\n    @IBOutlet weak var label: UILabel!\n\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        gradientView.mask = label\n        gradientView.configuration = self\n    }\n}\n\nextension ViewController: CCGradientViewConfiguration {\n    func configurationForGradientView(_ gradientView: CCGradientView) -\u003e CCGradientConfiguration {\n        return CCGradientConfiguration(colors: CCGradientColors.LGBT)\n    }\n}\n```\n\n\n## Installation\n\n\n\n### Manual\n\n\u003cp\u003e\n\nYou can drag and drop necessary files under `Sources` folder into your project.\n\n\n\n-  `CCGradientView.swift` - Mandatory\n\n-  `CCGradientConfiguration.swift` - Mandatory\n\n- `CCGradientColors.swift` - Optional, it contains all builtin gradient colors\n\n- `CCColors.swift` - Optional, it contains CSS color names and is used in `CCGradientColors.swift`, so if you use `CCGradientColors.swift` you need this file too.\n\n\u003c/p\u003e\n\n\n\n### Cocoapods\n```ruby\ntarget 'MyApp' do\n  pod 'CCGradient', '~\u003e 1.0'\nend\n```\nand import `CCGradient` when you want to use CCGradientView.\n\n```swift\nimport CCGradient\n```\n\u003cp\u003e\n\n\n\n\u003c/p\u003e\n\n\n## In Progress\n* Ability to animate gradient locations and colors.\n* More ready to use colors to come.\n\n\n## License\n\n\n\n[MIT License](http://opensource.org/licenses/mit-license.php).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcjcoax%2Fccgradientview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcjcoax%2Fccgradientview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcjcoax%2Fccgradientview/lists"}