Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Making CSS3 Gradient Background Spin

Making CSS3 Gradient Background Spin


I've set a CSS3 background gradient on an item, and I'd like to have it spin slowly. I'm just starting with CSS3 & HTML5 (Mind you, I've used CSS & HTML for 15 years, there's a lot of new stuff though). Is it possible to spin just the background, not the actual element?

If you want to see it, it's at - the infinity symbol on the left at the top (yes, it is a background gradient even though it's on the text's foreground, gotta love background-clip); I don't want the text to rotate but I do want the background to. Also, this only works in webkit browsers.

I'm willing to use whatever scripting gets it done - HTML5 canvas, CSS3 transforms, Javascript/jQuery, etc (although keeping it pure CSS3 would be great). I am trying to avoid using any images, however.

Problem courtesy of: Doug the Neard


You can do this by animating the CSS property with JavaScript. Here is an example that uses a bit of jQuery to ease changing the CSS:


Basically, I use setInterval to change the gradient angle every 100ms. I couldn't get your specific gradient to work, and this example only works in WebKit browsers, but that will get you started.

I should also note that WebKit is alone in supporting `background-clip: text', so that is another reason this won't work in Firefox or IE.

In case you didn't care to use any jQuery, here is the pure JavaScript way:

Solution courtesy of: Jeff B


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Making CSS3 Gradient Background Spin


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription