Flowing Gradient Background
Backgrounds @bhaskar Stars:0 Views:3
<div class="fb"><div class="cv"><canvas width="160" height="90"></canvas></div><div class="ct"><div class="pl"></div><label>Speed <input type="range" min="1" max="30" value="10"></label></div></div>
<style>
.fb{width:100%;height:100%;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-family:system-ui,-apple-system,sans-serif;color:#eee;}.cv{width:340px;height:190px;border-radius:16px;overflow:hidden}.cv canvas{width:100%;height:100%;display:block;filter:blur(6px) saturate(1.2);transform:scale(1.1)}.ct{display:flex;align-items:center;gap:16px;font-size:11px;color:#999}.pl{display:flex;gap:6px}.pl i{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .2s}.pl i.on{border-color:#fff;transform:scale(1.15)}.ct input{vertical-align:middle;accent-color:#0a84ff;width:90px}
</style>
<script>
(function(){var R=document.querySelector(".fb"),cv=R.querySelector("canvas"),x=cv.getContext("2d"),sp=R.querySelector("input"),pl=R.querySelector(".pl"),P=[["#a855c8","#f0529c","#dcdcfb","#4a39b5"],["#0ea5e9","#22d3ee","#e0f2fe","#1e3a8a"],["#f97316","#fbbf24","#fff7ed","#9a3412"],["#10b981","#a3e635","#ecfccb","#065f46"]],cur=0,t=0;P.forEach(function(p,i){var d=document.createElement("i");d.style.background="linear-gradient(135deg,"+p[0]+","+p[1]+")";d.onclick=function(){cur=i;mk()};pl.appendChild(d)});function mk(){[].forEach.call(pl.children,function(e,i){e.classList.toggle("on",i===cur)})}function frame(){t+=sp.value/1000;var p=P[cur],w=160,h=90;x.globalCompositeOperation="source-over";x.fillStyle=p[0];x.fillRect(0,0,w,h);var B=[[.3,.3,p[1],70],[.7,.7,p[2],80],[.8,.2,p[1],55],[.2,.8,p[3],60]];B.forEach(function(b,i){var cx=(b[0]+Math.sin(t*(1+i*.3)+i)*.28)*w,cy=(b[1]+Math.cos(t*(.8+i*.25)+i*2)*.28)*h,g=x.createRadialGradient(cx,cy,0,cx,cy,b[3]);g.addColorStop(0,b[2]);g.addColorStop(1,"rgba(0,0,0,0)");x.fillStyle=g;x.fillRect(0,0,w,h)});requestAnimationFrame(frame)}mk();frame()})();
</script>