A Pen by How Bizarre.

index.html

<section id="space">
  <ins id="moon">&nbsp;</ins>
</section>

Moon.markdown

Moon

A funny test of CSS3 multiple backgrounds and gradients.

A Pen by How Bizarre on CodePen.

License.

script.js

/*global document, window, $, jQuery*/

jQuery.extend({
    rndm: function (i) { 'use strict'; return Math.floor(i * (Math.random() % 1)); },
    rndMU: function (min, max) { 'use strict'; return min + jQuery.rndm(max - min + 1); },
    getDocHeight: function () {
        'use strict';

        return Math.max(
            $(document).height(),
            $(window).height(),
            document.documentElement.clientHeight
        );
    },
    getDocWidth: function () {
        'use strict';

        return Math.max(
            $(document).width(),
            $(window).width(),
            document.documentElement.clientWidth
        );
    }
});

function nightsky(i, count, brwsr) {
    'use strict';

    var stars = [],
        size = [];

    for (i; i <= count; i = i + 1) {
        stars[stars.length] = brwsr + 'linear-gradient(#fff, #000) ' + $.rndMU(0, $.getDocWidth()) + 'px ' + $.rndMU(0, $.getDocHeight()) + 'px no-repeat';
        size[size.length] = '1px 2px';
    }

    return {
        'bg': stars.join(', ') + ', #001 ' + brwsr + 'linear-gradient(#fff, #000) 0 0 no-repeat',
        'bgsize': size.join(', ')
    };
}

(function($) {
    'use strict';

    var $body = $('body'),
        $moon = $body.find('#moon'),
        mw = $moon.width(),
        mh = $moon.height(),
        count = $.rndMU(0, 1500),
        pos = nightsky(0, count, '-webkit-');

    $body.css({
        "background": pos.bg,
        "background-size": pos.bgsize
    });

    $moon.mousemove(function(e) {
        var dh = $.getDocHeight(),
            dw = $.getDocWidth(),
            mx = (e.pageX < ((dw / 2) - ((mw / 2)))) ? 0 : (e.pageX > ((dw / 2) + (mw / 2))) ? mw : -((((dw / 2) + (mw / 2)) - e.pageX) - mw),
            my = (e.pageY < ((dh / 2) - ((mh / 2)))) ? 0 : (e.pageY > ((dh / 2) + (mh / 2))) ? mh : -((((dh / 2) + (mh / 2)) - e.pageY) - mh);

        $moon.css({"background": "-webkit-radial-gradient(" + mx + "px " + my + "px, circle contain, rgba(255,255,255,0.75) 0%, rgba(127,127,127,0.5) 150%, #000 300%), url(http://errazib.com/img/dark_moon.png) no-repeat center"});
    });
}(jQuery));

style.css

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background:
    linear-gradient(#fff, rgba(0,0,0,1)) 157% 453px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 359px 225px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 435px 32px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 185px 701px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 857px 499px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 359px 225px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 500px 751px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 757px 159px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 357px 158px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 419px 825px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 339px 832px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 785px 741px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 57px 399px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 659px 25px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 510px 71px no-repeat,
    linear-gradient(#fff, rgba(0,0,0,1)) 57px 859px no-repeat,
    #001 linear-gradient(#fff, rgba(0,0,0,1)) 50px 50px no-repeat;
  background-size:
    0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%,
    0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%,
    0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%;
}

#moon {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -150px 0 0 -150px;  
  box-shadow: 0 0 500px #666;
  background: #000;
}

#moon:hover {
  cursor: none;
  box-shadow: none;
}