jQuery rainbow.js Demos

Get Started

Its easy, you have to download the rainbow.js main script, once its done, you just have to link it to your documents, after the jQuery inclusion.

<script type="text/javascript" src="path/to/rainbow.js"></script>

And now what ?

Now, you just have to create your first gradient with rainbow.js !

Let's start with a simple structure. We will create regular shapes, a square and a circle.

First, the css

.square{
    width:4em;
    height:4em; 
    margin:.5em; 
}

.rounded{ 
    width:4em; 
    height:4em; 
    margin:.5em; 
    } 
.rounded:before{ 
    border-radius:100%; 
}

And now, the HTML

<div 
class="square rainbow" 
id="gradient_2" 
data-type="linear" 
data-degrees="45" 
data-color="f1c40f-d35400" 
data-opacity="1" 
></div>

<div 
class="rounded rainbow" 
id="gradient_3" 
data-type="radial" 
data-degrees="45" 
data-color="ea6153-c0392b" 
data-opacity="1" 
></div>

will produce :

Gradient headers

You probably noticed the header image, its a simple divwith a background:url('image.png');and Rainbow.js finish the job !

<div 
class="header rainbow" 
id="rainHeader_1" 
data-type="linear" 
data-degrees="45" 
data-color="000-F00" >

    <div class="inner_content">
        <h3>Such gradient, so trendy !</h3>
    </div>                                       
</div>

.header{
 width:15em; 
 height:8em; 
 display:block; 
 margin:auto; 
 background:url(image.png)no-repeat center center; 
 background-size:cover; 
 }
 .header .inner_content{
    position:relative;
    /*By default, the gradient got a z-index of 1, so set the inner content to 2 or more. */
    z-index:2;
 }

Will produce :

Such gradient, so trendy !

Gradient images ? Let's do it

You probably noticed the header image, its a simple divwith a background:url('image.png');and Rainbow.js finish the job !

<div 
class="image rainbow" id="rainImage_1" 
data-type="linear" 
data-degrees="45" 
data-color="3498db-f1c40f" 
></div>

.image{ 
    width:15em; 
    height:8em; 
    display:block;
    margin:auto; 
    background:url(image.png)no-repeat center center; 
    background-size:cover; 
}

Will produce :

Gradient Text (webkit only)

You can find other applications with Rainbow.js, like create a title with a gradient color, Its easy, you just have to wrap your text with a .rainbowclass, and set the attributes to fit to your wish.

<h1 
class="rainbow" 
id="rainText_1" 
data-type="linear" 
data-degrees="0" 
data-color="000-F00" 
>Look ma ! A Rainbow text !</h1>

Will produce :

Look ma ! A Rainbow text !

More gradient texts ?

<h2 class="rainbow" id="rainText_2" data-type="linear" data-degrees="0" data-color="3498db-8e44ad">Gradient on text, webkit only :/ </h2>
<h3 class="rainbow" id="rainText_3" data-type="linear" data-degrees="0" data-color="2c3e50-95a5a6">But still a good feature for rainbow.js </h3> 
<p class="rainbow" id="rainText_4" data-type="radial" data-degrees="0" data-color="c0392b-1abc9c">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eveniet a ullam laborum sint libero aspernatur iste beatae odit odio necessitatibus quod neque debitis hic voluptatum. Repudiandae modi nihil exercitationem.</p>

Will produce :

Gradient on text, webkit only :/

But still a good feature for rainbow.js

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe eveniet a ullam laborum sint libero aspernatur iste beatae odit odio necessitatibus quod neque debitis hic voluptatum. Repudiandae modi nihil exercitationem.

Attriute : class

On the class attribute, you just have to set the .rainbowclass to your element, and let the magic happen !

Attriute : ID

The ID attribute, is maybe the more complex thing to understand with Rainbow.js

If you want a gradient block, you have to identify it like this <div id="gradient_1"></div>.

But what if you want to use more than 1 gradient block ? Don't panic ! Here is the solution :

                                    <div class="rainbow" id="gradient_1" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div> <div class="rainbow" id="gradient_2" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div> <div class="rainbow" id="gradient_3" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div> <div class="rainbow" id="gradient_4" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div> <div class="rainbow" id="gradient_5" data-type="linear" data-degrees="45" data-color="ea6153-c0392b" data-opacity="1"></div>

Attriute : data-type

The data-typeattribute can have 2differents values

radial
linear

Attriute : data-degrees

The data-degreesattribute will only work with the linear attribute, it will indicate to rainbow.js by how many degrees you want to rotate your gradient.

data-degrees="0"
data-degrees="45"
data-degrees="95"

Attriute : data-color

With the data-colorattribute, you will specify which colors you want to use for your gradients.

data-color="FFFFFF-000000"
data-color="2ECC71-F1C40F"
data-colors="EA6153-9B59B6"

Attriute : data-opacity

The data-opacityattribute, will determine the opacity ammount of your gradient, it goes from 0to 1and accept values like .50.

data-opacity=".25"
data-opacity=".50"
data-color=".85"
data-colors="1"