🎨 Easily add fancy (or subtle) gradient backgrounds to your views
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo-ng doc Aug 22, 2017
demo Use Gradient over image #9 Sep 11, 2017
publish Enjoy, world! Jun 21, 2017
screenshots Use Gradient over image #9 Sep 11, 2017
src Align with NativeScript plugin seed Aug 22, 2017
.gitignore Enjoy, world! Jun 21, 2017
.travis.yml Align with NativeScript plugin seed Aug 22, 2017
LICENSE Enjoy, world! Jun 21, 2017
README.md "Deprecated" this plugin Jun 8, 2018
tslint.json Align with NativeScript plugin seed Aug 22, 2017


NativeScript Gradient 🎨

PSA: With NativeScript 4.1 this plugin is no longer needed, because linear gradient support is now built-in. Here, have a Tweet about it: https://twitter.com/tjvantoll/status/1004735792474935296. I'm using those in my plugins demo app.

Build Status NPM version Downloads Twitter Follow

Those are screenshots of the Angular and plain XML demo apps.


tns plugin add nativescript-gradient


Since we're subclassing StackLayout, you can add <Gradient> to your view at any place where you'd otherwise use a StackLayout.

In addition to any properties you can already set on a StackLayout you should add:

  • colors: Pass a minimum number of two. Just use the value that you would otherwise pass to NativeScript's new Color("value"). So red, #FF0000, rgb(255, 0, 0), and even rgba(255, 0, 0, 0.5) (transparency!) will all work.
  • direction: One of "to bottom", "to top", "to right", "to left", "to bottom left", "to top left", "to bottom right", "to top right".


Add this to app.module.ts so you can use a Gradient tag in the view:

import { registerElement } from "nativescript-angular";
registerElement("Gradient", () => require("nativescript-gradient").Gradient);

These colors are also used in the screenshots above.

<Gradient direction="to right" colors="#FF0077, red, #FF00FF">
  <Label class="p-20 c-white" horizontalAlignment="center" text="My gradients are the best." textWrap="true"></Label>
  <Label class="p-10 c-white" horizontalAlignment="center" text="It's true." textWrap="true"></Label>

Plain XML

Import the Gradient namespace in the Page tag and enjoy the colors!

    xmlns:Gradient="nativescript-gradient" loaded="pageLoaded">

  <Gradient:Gradient direction="to right" colors="#FF0077, red, #FF00FF">
    <Label text="Such a fancy gradient :)" horizontalAlignment="center"/>

Q & A

Does this plugin use any third party libraries?

Nope, it's as light as a feather!

What kind of element is the Gradient tag?

It's a StackLayout, so you can use all the regular StackLayout properties (like orientation="horizontal" and borderRadius="5") - and you can use the Gradient tag in any spot where you would otherwise use a StackLayout.

How many colors can we pass to the plugin?

Knock yourself out, but the minimum is two.