Awesome Gradient

A curated list of awesome Gradient frameworks, libraries and software and resources

Contents

• Awesome Gradient
• CSS
• C#
• Dart
• HTML
• Java
• JavaScript
• Kotlin
• Objective-C
• Swift
• Sketch
• Vue

CSS

• auroral - Animated background gradients with pure CSS.
• nib - Stylus mixins, utilities, components, and gradient image generation.
• webgradients - A curated collection of splendid gradients made in CSS3, .sketch and .PSD formats.

C#

• CosineGradient - Cosine gradient generator for Unity.
• Unity-UIGradient - A UI gradient effect script for Unity.

Dart

• GradientAppBar - Gradient app bar for Flutter
• Gradient-Screens - 🌈 Gradients applied to buttons, texts and backgrounds in Flutter
• gradient-widgets - Flutter widgets wrapped with gradients

HTML

• conic-gradient - Polyfill for conic-gradient() and repeating-conic-gradient().
• gradients - Gradients!.
• GradientTopographyAnimation - Shape layers animation based on Polar Vector's work "Gradient Topography".
• shade - Mathematically derived gradient explorer.

Java

• ahoy-onboarding - Onboarding library for android with Gradient, Image or Solid color backgrounds.
• AnimatedGradientTextView - An Android TextView, using animated color gradients.
• Ariana - Provide Multiple Gradients in ImageViews and Texts. Integrate with ViewPager to change colors dynamically.
• Gradient-Artist - Learning to create Android UI library.
• GradientDrawableTuner - See how the properties of Android's "shape" affect the Drawable's appearance, intuitively.
• GradientLayout - A library which extends Android layouts to allow for the easy configuring of gradient backgrounds.
• MusicWave - With MusicWave represent your Sound in a gradient colored Visualization.
• ProgressRoundButton - A DownloadProgressButton with Animation for Android.

JavaScript

• colorful-background-css-generator - A colorful css gradient background generator.
• coolhue - Coolest Gradient Hues and Swatches.
• grabient - UI to generate linear-gradients.
• grade - This JavaScript library produces complementary gradients generated from the top 2 dominant colours in supplied images.
• gradient-string - Beautiful color gradients in terminal output.
• granim.js - Create fluid and interactive gradients animations with this small (< 17 kB) js library.
• hyperborder - Adds a gradient border to the Hyper terminal.
• postcss-easing-gradients - PostCSS plugin to create smooth linear-gradients that approximate easing functions.
• react-native-gradient-buttons - A lightweight, customizable and haptic Gradient Button component library for React Native.
• react-native-linear-gradient - A component for react-native
• react-native-login - React-native login via native facebook sdk, with a mp4 video background and a linear gradient.
• react-native-svg-animated-linear-gradient - A wrap SVG component for animated linear gradient.
• sketch-palettes - A Sketch plugin for exporting and importing fill presets. It supports colors, gradients, and pattern fills.
• tinygradient - Fast and small gradients manipulation, built on top of TinyColor.

Kotlin

• AvatarView - A circular Image View with a lot of perks. Including progress animation and highlight state with borders and gradient color.
• co.revely.gradient - An Android library for easy gradient management.
• Gradients - A curated collection of splendid gradients (port of https://webgradients.com for Android)
• Spark - An Android library to create gradient animation like Instagram&Spotify.

Objective-C

• OCSkeleton - Make your loading view a little difference.

Sketch

• 180 Gradients - 180 Gradients Sketch Resource by itmeo
• Juicy Gradients - Juicy Gradients Sketch Resource by David J
• Only 2000 Gradients Sketch Resource - Only 2000 Gradients Sketch Resource by Apostol Voicu

Swift

• AEConicalGradient - Conical (angular) gradient for iOS.
• AnimatedGradientView - Powerful gradient animations made simple for iOS.
• AnimatedMaskLabel - A nice gradient animated label that make easy to add a shimmering effect to any view.
• ComplimentaryGradientView - Create complementary gradients generated from dominant and prominent colors in supplied image.
• DSGradientProgressView - A simple animated progress bar in Swift.
• DynamicColor - Yet another extension to manipulate colors easily in Swift
• EZYGradientView - Create gradients and blur gradients without a single line of code.
• GradientCircularProgress - Customizable progress indicator library.
• GradientLoadingBar - A customizable animated gradient loading bar.
• GradientProgressBar - A customizable gradient progress bar (UIProgressView).
• Gradients - A curated collection of splendid 180+ gradients made.
• 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.
• GradientView - Easily use gradients in UIKit for iOS & tvOS.
• Hue - Hue is the all-in-one coloring utility that you'll ever need.
• KDCircularProgress - A circular progress view with gradients written in Swift.
• MKGradientView - Highly customizable Core Graphics based gradient view for iOS.
• Pastel - Gradient animation effect like Instagram.
• Randient - 🎨 Radient, random gradients in Swift.
• RHPlaceholder - Show pleasant loading view for your users 😍
• Shift - Animate gradient changes with time or motion for iOS.
• Skeleton - An easy way to create sliding CAGradientLayer animations.
• SkeletonView - An elegant way to show users that something is happening and also prepare them to which contents he is waiting.
• Tamamushi - Gradient NavigationBar library.
• UIGradient - A simple and powerful library for using gradient layer, image, color.

Vue

• uiGradients - Beautiful colour gradients for design and code.