css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. Mario, Thanks for the code. I can honestly say it is the best and cleanest solution i found for gradient transitions. I was wondering if you could help me. I want to use your code as a background effect to a flexslider, but when i try to do so, the flexslider stops working. Do you know how to get around that? if you'd like to see what i mean, go to http://creativewebdenver.businesscatalyst.com/test. Thank you

  2. Thanks! I'll have a look at your test tomorrow and see if I can find what breaks it.

  3. thank you Mario. If you'd like, the question is also on Stack Overflow at: http://stackoverflow.com/questions/24843636/combine-flexslider-with-background-gradient-animation

  4. Looks to me like you have an issue with the jQuery initialisation itself. Not sure if that helps, but maybe you could could try swap the order of your javascript imports: from jquery.flexslider.js / jquery-latest.min.js to jquery-latest.min.js / jquery.flexslider.js

  5. Duh... Thank you tons Mario. Hey, just to tickle your brain. Sometime in the near future I want to have a webpage with an image right in the center (probably an svg) responding to a beat. For example, think of the nike logo "dancing" with some music, and scaling up every third beat and scaling back down sometime before the fourth beat. The trick is, I obviously don't want to use Flash. Do you know of a way to do this with JQuery?

  6. Using HTMLWeb Audio you can analyze the sound file you are playing and extract the amplitudes of the frequency spectrum. I haven't found a jQuery library for that but there are some tutorials that explain the basics. E.g. this one: http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound - if you just look at the base frequency and map the amplitude to the scale of your image to it you should get the effect you want. The alternative is to simply use a setInterval and a scale lookup table and just fake it - as long as you manage to play the sound in sync with the interval that might actually give you a cleaner look.

  7. Mario, I've got another question for you. How can I give this an opacity level programatically? I know I can do it through css, but if i do then the text inside of the container which has your gradient also adopts the same opacity. I want to just set the opacity to the animation, while leaving the opacity normal for the text inside. If you want to check it out, the link again is http://creativewebdenver.businesscatalyst.com/test Thank you!

  8. Did you try to position the text that should go on top using a DIV with a z-index and relative or absolute positioning?

    But you can also make the gradient transparent by using rgba(r,g,b,a) instead of #rrggbb inside the gradient code. Here is an example pen that also animates the alpha: http://codepen.io/quasimondo/pen/lzpBI

  9. Hi, Just wondering is that possible to pick own colour? I've tried replace my own colour it just simply disappeared, many thanks

  10. Sure, if you look at the code right at the top there is an array with triples of RGB values, all you have to do is to split your custom colors into RGB and replace the values in the list without breaking the format. If it "simply disappeared" you might have acidentally made a comma or a bracket dissappear during your editing.

  11. HI Mario, Thanks for this. For some reason it's "jerking" or stopping and starting on us on cycle. So as it goes through the array, when it comes back around it stalls and has an obvious visual jerk as it restarts. Any ideas on what that could be?

  12. That's strange - does that happen on a fork you edited or right on this page? I haven't noticed any "jerking" so far. Is there maybe a null entry in you color array caused by an accidental comma? Do you have the code somewhere I can see?

  13. Thanks Mario, it happens if we use the code verbatim on our Jekyll site using Sass. Tried everything we can think of.

  14. Oh that's of course annoying. Well, hard to debug without seeing it in action, so if you can share a non-public link, you could email it to me: mario@quasimondo.com - or if it's public anyway post it here.

  15. I think I've found the problem - it was in the way I contructed the color string using "#" and the hex code. Since I didn't pad the string with zeros it would give the wrong color for any reds smaller than 16. I've changed the code to use "rgb(r,g,b)" instead. Please update your code accordingly and let me know it that was it.

  16. Hello Mario, thanks for the piece of code, do you have a way it work on internet explorer ? Like for ie10+ Many thx

  17. i want to use this gradient as my tumblr background. How do i do that? how do i add it in my html

  18. Love this! Is it normal/safe for CPU usage to be so high?

  19. The CPU usage depends on the size of the area you are filling with the gradient and on the browser you are using. The actual rendering of the gradient is handled by CSS and thus depends on whatever the different browsers do internally - so there is no real way of making it faster. The only way to reduce CPU load would be to update the gradient less frequently.

  20. Hey Mario i was wondering if you can do this with only 2 color in a vertical motion? I want to go from #86CBFB to #283C4B.

  21. Hi Mario, this is really cool and I applied it to a Pen of mine. I just started using Codepen this week and so I don't know if or how to credit you in my current pen. I forked this pen, but only needed to apply pieces of it to my existing pen. Anyhow, just wanted to mention...and please let me know if there is a better way credit

  22. Hi, @quasimondo Mario! I have encountered problems when I left the browser tab in wich this animation is and back some seconds after. It seems that the intervals are accumulating in the query and, when we back to the tab, it fires very fast: http://ingressocerto.ddns.net/repo/ic/home.html

  23. This sounds more like a browser specific problem. My guess is that if that browser has some weird kind of sleep mode that breaks things it also might have an event that gets triggered when that mode is activated/deactivated. So you'd have to listen to that event and disable/enable the timeouts.

  24. Really cool and easy to follow code.

    I think I am going to attempt to map something based off this concept to a css variable. im doing a landing page for my buddy's album. i just want greys white or black i think that is gonna make this even simpler. thanks for the inspiration.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.