Awesome Rainbow Effect With CSS3

  • Avinash
  • 7
  • Aug 26, 2011
  • Web Design

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.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • 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