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 currently working at a leading web development company as a Sr. PHP Web Developer. He is the founder of the Xpert Developer. He has completed B.E. in Information Technology. Born and brought up in Ahmedabad. He loves to code and coding is all about passion for him. Follow him on twitter at Avinash Zala & Xpert Developer.

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