Pretty dynamic webpage backgrounds

Ever since I wrote this post on dynamic backgrounds, I’ve been trying to accomplish the same thing with javascript, automatically, for a webpage.  It’s now possible thanks to a new css tag in town – blend-mode!  Firefox supports it, and Chrome does if you turn on experimental features.  Here’s pictures.



Here’s a fiddle:


Here’s the code (I have got to find a better ‘show code in wordpress’ plugin

function dynamicbackground(repetitions){
 var repetitions = repetitions || 5;
 var thebody = document.getElementsByTagName("body")[0];
 var i;
 var randdeg = Math.round(Math.random() * 360);
 var randcolor = "#"+Math.random().toString(16).slice(2,8);
 //randcolor = "#f00";
 var randcolor2 = "#"+Math.random().toString(16).slice(2,8);
 randcolor2= "#fff"; //black
 //randcolor2= "#000"; //white
 var randstart = Math.round(Math.random()*30);
 var randend = Math.round(Math.random()*70) + 30;
 console.log(randdeg+", "+randcolor+", "+randstart+", "+randend);
 //create overlapping divs with blend mode 'difference'. looks really nice
 thebody.innerHTML += "<div class = 'generatedgradient' style='background-image:linear-gradient("+randdeg+"deg, "+randcolor2+" "+randstart+"%,"+randcolor+" "+randend+"%);'>&nbsp</div>";

And a live page at:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.