Steiksi does not currently provide support for this item.

13 comments found.

do you have to click or hover? can you start animation upon page load? I love this!!!!

No you do not have to click or hover. The Gradient Switch automatically triggers on page load by default. If you want, you can turn the hover or click function on so Gradient Switch will trigger on hover/click.

I’ll update the description to make this clearer.


I like your submission, definitely interesting.

Good luck with sales!

Thank you!

This is great! So many ideas for this baby. :-)

Thank you, have fun!

Friggin’ Awesome! 5 Stars.

Thanks! Have fun!

Thanks for that link, I had already found a similar website. Problem is I can’t figure out how to pass colors to that script, but I’m working on it!

<svg xmlns="">
        <lineargradient y1="0%" y2="100%" x1="0%" x2="0%" id="gradient">
            <stop style="stop-color: rgb(69, 0, 3);" offset="0%" />
            <stop style="stop-color: rgb(92, 0, 2);" offset="100%" />
    <rect fill="url(#gradient)" height="100%" width="100%" />
This is the source of the image, see the two colours ? So linear is pretty simple and I guess it would be fairly easy to do the others.

I probably won’t buy this, just thought you might like to know how it could be done. I’m a bit of a pureist when it comes to JavaScript so anything jQuery is a no go.

I had already found that out, but it’s still has some bugs, and I don’t want to release an update with resolving these first. Thanks for your help!

Do you have a full background example? Just wondering what sort of performance hit I would get using this on the body tag. Love the idea of this though…

I’ve just updated the live preview. At the top of the live preview is a link to the full screen preview.

Great! Thanks for the quick example. Sold. I think this will work nicely for a theme I am working on. I will grab the extended licence sometime this week. Cheers!

No problem, give me a link when you’re finished, I’m very interested to see what you did with it!

Hi this is fantastic, however, I am trying to apply it dynamically without a page reload in between. Can you tell me how I can remove and reinitialise the effect with javascript?

actually, let me rephrase the question. After the following…

$(‘html’).gradientSwitch({ diagonal:true,colors: [[’#fff’, ’#FF99FF’]],fadeStart:false,adjustOffset:20});

Is is possible to remove or hide gradient switch so that either new colours can be applied like by re-initialising like the following …

$(‘html’).gradientSwitch({ diagonal:true,colors: [[’#000’, ’#0000CC’]],fadeStart:false,adjustOffset:20});

or so that a background image or solid colour can be applied like this …

$(‘body’).css(‘background-image’, ‘url(\’./images/backgrounds/texture3.jpg\’)’);

thanks in advance.

Is there any choppiness or high video/cpu load if this is incorporated on a 1080×1200 web background and viewed on a “run of the mill” PC?

Any chance you could include a fullscreen demo and not just small boxes changing? I’d love to test this to make sure that I don’t see artifacts while it changes colors.

Nice script!

I followed the directions perfectly.

I want the whole background of the page to have this effect, so I added the last step just after the body tag.

Doesn’t work. Do I have to do something special to get it to work for an entire page, and not just a small div like you show in your examples?


This is such a neat plugin & exactly what I was looking for, thank you! I have a question. I’m trying to add this effect to my homepage only ( so that there will be a gradient effect behind the vimeo video. How do I go about doing this so that it’s only on that page and not every page?

Good Luck With Sale :)