Creating Gradient and Rainbow Text Effects with jQuery

A small jQuery script used to create gradient and rainbow text effect from user-supplied colors specified in the Javascript. It is great for creating cool titles or headlines for your design project. No any CSS or Image needed.

See Also:

• Online CSS Gradient Generator

How to use it:

1. Wrap your title text in a container element.

<span class="title">
  jQueryScript.Net
</span>

2. Include the latest version of jQuery javascript library at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

3. Specify the colors in RGB and enable the gradient text effect via Javascript.

color1 = {
  r: 95,
  g: 158,
  b: 160
}

color2 = {
  r: 95,
  g: 90,
  b: 200
}

$( ".title" ).each( function( index, element ){
  var title = $(this),
    titleText = $( this ).text(),
    titleTextArray = titleText.split(''),
    colorDelta;
  
    colorDelta = {
      r: (color2.r - color1.r)/titleTextArray.length,
      g: (color2.g - color1.g)/titleTextArray.length,
      b: (color2.b - color1.b)/titleTextArray.length
    }
    
    titleText = "";
    for(var i = 0; i < titleTextArray.length; i++ ){

      textColor = {
        r: Math.round(color1.r + colorDelta.r * i),
        g: Math.round(color1.g + colorDelta.g * i),
        b: Math.round(color1.b + colorDelta.b * i)
      }
      
      titleText += "<span style ='color:rgb(" + 
                      textColor.r + ", " + 
                      textColor.g + ", " + 
                      textColor.b + "" + 
                      ");'>" + titleTextArray[i] + "</span>";
    }
  
    title.html(titleText);
  
});

---

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