Awesome Rainbow Effect With CSS3

By Avinash

August 26, 2011Web Design7 Comments

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:

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

<h1 class="rainbow">
  This is the Rainbow Effect using CSS3.
  Is that COOL?
</h1>

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); }
.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);
}

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.

Share This Article

  • Mickael

    Hi,

    it’s working on firefox aurora.

    Regards,

    Mickael

    • http://www.xpertdeveloper.com Avinash

      Hi Mickael.
      Thanks!!

  • http://blog.corrspt.com Pedro Rio

    Hi,

    Opera 11 seems to display the gradient as well ;)

    Nice trick

    • http://www.xpertdeveloper.com Avinash

      Yes But it shows gradient in whole text background rather than on text. Is that true?

  • http://design.xpertdeveloper.com falguni

    yeah! nice effect,
    but how to apply this effect for text not a background ?

    • http://www.xpertdeveloper.com Avinash

      It will apply to text in Chrome and for other browser it will show effect in Background..

  • Pingback: Awesome CSS3 Pulse Effect | Expert PHP Developer