{"id":63291,"url":"https://github.com/Gradients/awesome-gradient","name":"awesome-gradient","description":"😎 A curated list of awesome Gradient frameworks, libraries and software and resources","projects_count":67,"last_synced_at":"2026-06-11T00:00:36.653Z","repository":{"id":51788970,"uuid":"152196875","full_name":"Gradients/awesome-gradient","owner":"Gradients","description":"😎 A curated list of awesome Gradient frameworks, libraries and software and resources","archived":false,"fork":false,"pushed_at":"2021-05-10T00:28:45.000Z","size":134,"stargazers_count":159,"open_issues_count":0,"forks_count":11,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-05-08T20:04:41.623Z","etag":null,"topics":["android","animation","awesome","css","design","gradient","html","ios","java","javascript","kotlin","objc","objective-c","swift","ui","vue"],"latest_commit_sha":null,"homepage":"","language":null,"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/Gradients.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-09T06:11:41.000Z","updated_at":"2026-03-09T08:40:17.000Z","dependencies_parsed_at":"2022-08-17T14:51:11.782Z","dependency_job_id":null,"html_url":"https://github.com/Gradients/awesome-gradient","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Gradients/awesome-gradient","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradients%2Fawesome-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradients%2Fawesome-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradients%2Fawesome-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradients%2Fawesome-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gradients","download_url":"https://codeload.github.com/Gradients/awesome-gradient/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gradients%2Fawesome-gradient/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34175887,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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"}},"created_at":"2024-07-08T00:00:27.284Z","updated_at":"2026-06-11T00:00:36.654Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Swift","Kotlin","Sketch","JavaScript","HTML","CSS","Vue","Java","Dart","Objective-C"],"sub_categories":[],"readme":"# Awesome Gradient\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg width=\"500\" height=\"350\" src=\"README/awesome.png\" alt=\"Awesome\"\u003e\n\u003c/div\u003e\n\n[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\nA curated list of awesome Gradient frameworks, libraries and software and resources\n\n### Contents\n\n- [Awesome Gradient](#awesome-gradient)\n- [CSS](#css)\n- [C#](#cs)\n- [Dart](#dart)\n- [HTML](#html)\n- [Java](#java)\n- [JavaScript](#javascript)\n- [Kotlin](#kotlin)\n- [Objective-C](#objective-c)\n- [Swift](#swift)\n- [Sketch](#sketch)\n- [Vue](#vue)\n\n## CSS\n\n* [auroral](https://github.com/LunarLogic/auroral) - Animated background gradients with pure CSS.\n* [nib](https://github.com/stylus/nib) - Stylus mixins, utilities, components, and gradient image generation.\n* [webgradients](https://github.com/itmeo/webgradients) - A curated collection of splendid gradients made in CSS3, .sketch and .PSD formats.\n\n\u003ch2 id=\"cs\"\u003eC#\u003c/h2\u003e\n\n* [CosineGradient](https://github.com/keijiro/CosineGradient) - Cosine gradient generator for Unity.\n* [Unity-UIGradient](https://github.com/azixMcAze/Unity-UIGradient) - A UI gradient effect script for Unity.\n\n## Dart\n\n* [GradientAppBar](https://github.com/joostlek/GradientAppBar) - Gradient app bar for Flutter\n* [Gradient-Screens](https://github.com/bluemix/Gradient-Screens) - 🌈 Gradients applied to buttons, texts and backgrounds in Flutter\n* [gradient-widgets](https://github.com/bluemix/gradient-widgets) - Flutter widgets wrapped with gradients\n\n## HTML\n\n* [conic-gradient](https://github.com/LeaVerou/conic-gradient) - Polyfill for conic-gradient() and repeating-conic-gradient().\n* [gradients](https://github.com/mrmrs/gradients) - Gradients!.\n* [GradientTopographyAnimation](https://github.com/codrops/GradientTopographyAnimation) - Shape layers animation based on Polar Vector's work \"Gradient Topography\".\n* [shade](https://github.com/jxnblk/shade) - Mathematically derived gradient explorer.\n\n## Java\n\n* [ahoy-onboarding](https://github.com/codemybrainsout/ahoy-onboarding) - Onboarding library for android with Gradient, Image or Solid color backgrounds.\n* [AnimatedGradientTextView](https://github.com/Mursaat/AnimatedGradientTextView) - An Android TextView, using animated color gradients.\n* [Ariana](https://github.com/akshay2211/Ariana) - Provide Multiple Gradients in ImageViews and Texts. Integrate with ViewPager to change colors dynamically.\n* [Gradient-Artist](https://github.com/Hariofspades/Gradient-Artist) - Learning to create Android UI library.\n* [GradientDrawableTuner](https://github.com/duanhong169/GradientDrawableTuner) - See how the properties of Android's \"shape\" affect the Drawable's appearance, intuitively.\n* [GradientLayout](https://github.com/csdodd/GradientLayout) - A library which extends Android layouts to allow for the easy configuring of gradient backgrounds.\n* [MusicWave](https://github.com/akshay2211/MusicWave) - With MusicWave represent your Sound in a gradient colored Visualization.\n* [ProgressRoundButton](https://github.com/cctanfujun/ProgressRoundButton) - A DownloadProgressButton with Animation for Android.\n\n## JavaScript\n\n* [colorful-background-css-generator](https://github.com/webcore-it/colorful-background-css-generator) - A colorful css gradient background generator.\n* [coolhue](https://github.com/webkul/coolhue) - Coolest Gradient Hues and Swatches.\n* [grabient](https://github.com/johnkorzhuk/grabient) - UI to generate linear-gradients.\n* [grade](https://github.com/benhowdle89/grade) - This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.\n* [gradient-string](https://github.com/bokub/gradient-string) - Beautiful color gradients in terminal output.\n* [granim.js](https://github.com/sarcadass/granim.js) - Create fluid and interactive gradients animations with this small (\u003c 17 kB) js library.\n* [hyperborder](https://github.com/webmatze/hyperborder) - Adds a gradient border to the Hyper terminal.\n* [postcss-easing-gradients](https://github.com/larsenwork/postcss-easing-gradients) - PostCSS plugin to create smooth linear-gradients that approximate easing functions.\n* [react-native-gradient-buttons](https://github.com/thomaswangio/react-native-gradient-buttons) - A lightweight, customizable and haptic Gradient Button component library for React Native.\n* [react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient) - A \u003cLinearGradient /\u003e component for react-native\n* [react-native-login](https://github.com/brentvatne/react-native-login) - React-native login via native facebook sdk, with a mp4 video background and a linear gradient.\n* [react-native-svg-animated-linear-gradient](https://github.com/virusvn/react-native-svg-animated-linear-gradient) - A wrap SVG component for animated linear gradient.\n* [sketch-palettes](https://github.com/andrewfiorillo/sketch-palettes) - A Sketch plugin for exporting and importing fill presets. It supports colors, gradients, and pattern fills.\n* [tinygradient](https://github.com/mistic100/tinygradient) - Fast and small gradients manipulation, built on top of TinyColor.\n\n## Kotlin\n\n* [AvatarView](https://github.com/vitorhugods/AvatarView) - A circular Image View with a lot of perks. Including progress animation and highlight state with borders and gradient color.\n* [co.revely.gradient](https://github.com/revely-inc/co.revely.gradient) - An Android library for easy gradient management.\n* [Gradients](https://github.com/bakhtiyork/gradients) - A curated collection of splendid gradients (port of https://webgradients.com for Android)\n* [Spark](https://github.com/TonnyL/Spark) - An Android library to create gradient animation like Instagram\u0026Spotify.\n\n## Objective-C\n\n* [OCSkeleton](https://github.com/mayqiyue/OCSkeleton) - Make your loading view a little difference.\n\n## Sketch\n* [180 Gradients](https://www.sketchappsources.com/free-source/2545-massive-180-gradients-set-sketch-freebie-resource.html) - 180 Gradients Sketch Resource by itmeo\n* [Juicy Gradients](https://www.sketchappsources.com/free-source/2644-juicy-ice-cream-gradients-sketch-freebie-resource.html) - Juicy Gradients Sketch Resource by David J\n* [Only 2000 Gradients Sketch Resource](https://www.sketchappsources.com/free-source/2750-omg-so-many-gradients-sketch-freebie-resource.html) - Only 2000 Gradients Sketch Resource by Apostol Voicu\n\n## Swift\n\n* [AEConicalGradient](https://github.com/tadija/AEConicalGradient) - Conical (angular) gradient for iOS.\n* [AnimatedGradientView](https://github.com/rwbutler/AnimatedGradientView) - [![AnimatedGradientView](https://raw.githubusercontent.com/rwbutler/AnimatedGradientView/master/docs/images/animated-gradient-view-thumbnail.png)](https://github.com/rwbutler/AnimatedGradientView)  Powerful gradient animations made simple for iOS.\n* [AnimatedMaskLabel](https://github.com/jogendra/AnimatedMaskLabel) - A nice gradient animated label that make easy to add a shimmering effect to any view.\n* [ComplimentaryGradientView](https://github.com/gkye/ComplimentaryGradientView) - Create complementary gradients generated from dominant and prominent colors in supplied image.\n* [DSGradientProgressView](https://github.com/DholStudio/DSGradientProgressView) - A simple animated progress bar in Swift.\n* [DynamicColor](https://github.com/yannickl/DynamicColor) - Yet another extension to manipulate colors easily in Swift\n* [EZYGradientView](https://github.com/shashankpali/EZYGradientView) - Create gradients and blur gradients without a single line of code.\n* [GradientCircularProgress](https://github.com/keygx/GradientCircularProgress) - Customizable progress indicator library.\n* [GradientLoadingBar](https://github.com/fxm90/GradientLoadingBar) - A customizable animated gradient loading bar.\n* [GradientProgressBar](https://github.com/fxm90/GradientProgressBar) - A customizable gradient progress bar (UIProgressView).\n* [Gradients](https://github.com/cruisediary/Gradients) - A curated collection of splendid 180+ gradients made.\n* [GradientSlider](https://github.com/jonhull/GradientSlider) - GradientSlider is a UIControl subclass which is similar to UISlider, but with a linear gradient coloring the slider’s track. Useful for creating color pickers.\n* [GradientView](https://github.com/soffes/GradientView) - Easily use gradients in UIKit for iOS \u0026 tvOS.\n* [Hue](https://github.com/hyperoslo/Hue) - Hue is the all-in-one coloring utility that you'll ever need.\n* [KDCircularProgress](https://github.com/kaandedeoglu/KDCircularProgress) - A circular progress view with gradients written in Swift.\n* [MKGradientView](https://github.com/maxkonovalov/MKGradientView) - Highly customizable Core Graphics based gradient view for iOS.\n* [Pastel](https://github.com/cruisediary/Pastel) - Gradient animation effect like Instagram.\n* [Randient](https://github.com/uias/Randient) - 🎨 Radient, random gradients in Swift.\n* [RHPlaceholder](https://github.com/robertherdzik/RHPlaceholder) - Show pleasant loading view for your users 😍\n* [Shift](https://github.com/kgellci/Shift) - Animate gradient changes with time or motion for iOS.\n* [Skeleton](https://github.com/gonzalonunez/Skeleton) - An easy way to create sliding CAGradientLayer animations.\n* [SkeletonView](https://github.com/Juanpe/SkeletonView) - An elegant way to show users that something is happening and also prepare them to which contents he is waiting.\n* [Tamamushi](https://github.com/makomori/Tamamushi) - Gradient NavigationBar library.\n* [UIGradient](https://github.com/dqhieu/UIGradient) - A simple and powerful library for using gradient layer, image, color.\n\n## Vue\n\n* [uiGradients](https://github.com/ghosh/uiGradients) - Beautiful colour gradients for design and code.\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/gradients%2Fawesome-gradient/projects"}