CSS3 is the most discussed topic since long time. Today I was surfing and found a very Cool effect achieved by the CSS3.

This the trick of the CSS3 gradient effect but with the little bit of tweak is creating a very cool effect.

I am giving the code explaination for this.

HTML:

[cc lang=”html4strict”]

This is the Rainbow Effect using CSS3.
Is that COOL?

[/cc]

CSS:

[cc lang=”css”]
.rainbow
{
font-size:36px;
cursor:pointer;
}

.rainbow:hover
{
-webkit-background-clip: text;
color: white;
-webkit-text-fill-color: transparent;
background-color:#FFF;
background-image:
-webkit-gradient(linear,left top,right top,from(#ea8711), to(#d96363));
background-image:
-webkit-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);
background-image:
-moz-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);
background-image:
-ms-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);
background-image:
-o-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);
}
[/cc]

Demo:

This is the Rainbow Effect using CSS3. Is that COOL?

Note: As far as I checked this is working only on Chrome.

Hence this is working only for chrome, hopefully this will be supported to all major browsers in very short future.