Awesome Rainbow Effect With CSS3

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:

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

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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 Post

7
Leave a Reply

avatar
4 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Awesome CSS3 Pulse Effect | Expert PHP DeveloperAvinashfalguniPedro RioMickael Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Mickael
Guest
Mickael

Hi,

it’s working on firefox aurora.

Regards,

Mickael

Pedro Rio
Guest

Hi,

Opera 11 seems to display the gradient as well ;)

Nice trick

falguni
Guest

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

trackback

[…] HTML | 0 comments Here we comes with another CSS3 tips and tricks. Earlier we have posted about the CSS3 Rainbow Effect. In this tutorial we will create pulse effect using CSS 3 property only.I am going to create this […]