Gradient Text Effect In jQuery - Gradient.Text.js

File Size: 12.6 KB
Views Total: 3280
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Gradient Text Effect In jQuery - Gradient.Text.js

Gradient.Text.js lightweight jQuery text colorizer which lets you create gradient/rainbow text using CSS linear-gradient function. Ideal for creating an online gradient text generator for generating compelling, impressive titles, text logos, etc.

See Also:

How to use it:

1. Load the latest version of jQuery JavaScript library in your html document.

<script src="//"></script>

2. Download and load the main JavaScript file jquery.gradient.text.js after jQuery.

<script src="jquery.gradient.text.js"></script>

3. Add the CSS class 'gradient-text' to your text and specify two or more colors in the data-gradient-text-range attribute as this:

<span class="gradient-text" 
      data-gradient-text-range="FF0000, AA1100,FF7700,FF4400,FFDD00,FFBB11,00FF00,55AA00,0000FF,000055,8A2BE2,310062,C77DF3,4B0082">
      Gradient Text

4. Possible plugin options to customize the gradient text effec.


  // uses HEX color
  hexMode: true,

  // range color
  range: null,

  // tilt range or angle
  positionOrAngle: "to bottom right",

  // percentage ranges
  percentages: false,
  percentagesArray: false

5. You can also pass the options via HTML data attributes as follows:

<span class="gradient-text" 
      data-gradient-text-range="FF0000, AA1100,FF7700,FF4400,FFDD00,FFBB11,00FF00,55AA00,0000FF,000055,8A2BE2,310062,C77DF3,4B0082"
      data-gradient-text-position="to top right"
      data-gradient-text-percentages=".3, .5">
      Gradient Text

This awesome jQuery plugin is developed by matgargano. For more Advanced Usages, please check the demo page or visit the official website.