A Pen by cesardanielhg.

index.html

<canvas id="canvas"></canvas>

script.js

var canvas = document.getElementById("canvas"),
    width = canvas.width = getWidth(),
    height = canvas.height = outerHeight - 185,
    ctx = canvas.getContext("2d"),
    aBubbleX = [],
    aBubbleY = [],
    aBubbleLR = [],
    aBubbleTB = [],
    iBubbleSpeed = 1,
    aBubbleSize = [],
    colors = [
      "rgba(158, 190, 223, 0.65)",
      "rgba(154, 225, 241, 0.65)",
      "rgba(175, 186, 232, 0.65)"
    ],
    aBubbleColor = [],
    iBubbles = 21;

function getWidth() {
  return parseInt(window.getComputedStyle(document.body).getPropertyValue("width"));
}

window.addEventListener("resize", function(){
  width = canvas.width = getWidth();
}, false);

for(i = 0; i < iBubbles; i++) {
  aBubbleX[i] = fnRandom(0, width);
  aBubbleY[i] = fnRandom(0, height);
  aBubbleLR[i] = fnRandom(-iBubbleSpeed, iBubbleSpeed) / 40;
  if(aBubbleLR[i] == 0) aBubbleLR[i] += 0.2;
  aBubbleTB[i] = fnRandom(-iBubbleSpeed, 0) / 5;
  if(aBubbleTB[i] == 0) aBubbleTB[i] += 0.2;
  aBubbleSize[i] = fnRandom(25, 60);
}

for(i = 0; i < iBubbles; i++) {
  aBubbleColor[i] = colors[fnRandom(0, colors.length)];
}

function fnDraw() {
  canvas.width = canvas.width;
  
  fnBubbles();
  fnIncrement();
  fnControllBubble();
  
  window.requestAnimationFrame(fnDraw);
}
fnDraw();

function fnRandom(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

function fnBubbles() {
  for(i = 0; i < iBubbles; i++) {
    ctx.beginPath();
    ctx.arc(aBubbleX[i], aBubbleY[i], aBubbleSize[i], 0, Math.PI * 2);
    ctx.fillStyle = aBubbleColor[i];
    ctx.fill();
  }
}

function fnIncrement() {
  for(i = 0; i < iBubbles; i++) {
    aBubbleX[i] += aBubbleLR[i];
    aBubbleY[i] += aBubbleTB[i];
  }
}

function fnControllBubble() {
  for(i = 0; i < iBubbles; i++) {
    if(aBubbleX[i] < -60) {
      aBubbleX[i] += width + 120;
    }
    if(aBubbleX[i] > width + 60) {
      aBubbleX[i] -= width + 120;
    }
    if(aBubbleY[i] < -60) {
      aBubbleY[i] += height + 120;
    }
    if(aBubbleY[i] > height + 60) {
      aBubbleY[i] -= height + 120;
    }
  }
}

Simple-iOS-7-background.markdown

Simple iOS 7 background

Really beautiful iOS 7 background. (my version is without blur)

A Pen by cesardanielhg on CodePen.

License.

style.css

body {
  margin: 0 auto;
  height: 100%;
  text-align: center;
  background: #333;
  height: 100%;
}

#canvas {
  background:
    linear-gradient(#4B82A9, #90BBDB 40%, #90BBDB 60%, #284580);
}