Edit in JSFiddle

function makeid() {
    var text = "<span>";
    var possible = "                 abcdefghijklmnopqrstuvwxyz0123456789";

    for (var i = 0; i < Math.floor(Math.random() * 10 + 15); i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text + '</span>';
}

var names = ['Audit', 'Admin ', 'Customer View ', 'Builds', 'Reports', 'Manage', 'Roles & Rights'];

var pics = ['http://static.squarespace.com/static/51dace95e4b07e302341f4e0/t/527abacae4b0982aa4abc03c/1383774922521/Flaticon_2772.png', 'http://www.stakstaustell.org.uk/wp-content/uploads/2013/11/Flaticon_14711.png', 'http://xmpolitical.com/wp-content/uploads/2014/02/Flaticon_3965.png', 'http://www.atscontainers.com/imgs/magnifier.png', 'http://www.wordpressfuel.com/assets/front/images/icons/lightbulb32.png', 'http://www.jquery-buttons.com/jhb-icons/arrowDown.png', 'https://cdn2.iconfinder.com/data/icons/flat-style-svg-icons-part-1/512/gear_settings_cog_preferences-32.png', 'build.png'];

for (var i = 0; i < 7; i++) {
    $('#appGrid').append('<div id="app-' + i + '" class="app"></div>');
    var name = names[i];
    var $app = $("#app-" + i);

    $app.html('<div class="appTitle">' + name + '</div><div class="appRibbon"></div><div class="appIcon"></div><div class="appGlimmerDiv"></div>');

    var hex = stringToColor(name);
    var cl = ColorLuminance;
    hex = cl(hex, '-.4');
    //hex = cl('2989d8','-.'+i);


    $app.css('background', '-webkit-linear-gradient(260deg, ' + cl(hex, 2.5) + ' 0%,' + cl(hex, .5) + ' 15%,' + cl(hex, .2) + ' 20%,' + cl(hex, 0) + ' 77%,' + cl(hex, -.4) + ' 98%)');

    $app.find('.appRibbon').css({
        'background': '-webkit-linear-gradient(-45deg, ' + cl(hex, 1) + ' 0%,' + cl(hex, .5) + ' 20%,' + cl(hex, .2) + ' 35%,' + cl(hex, 0) + ' 77%,' + cl(hex, -.3) + ' 100%)'
    });

    $app.find('.appIcon').css({
        '-webkit-mask-image': "url('" + pics[i] + "')",
            'background': '-webkit-linear-gradient(-45deg, rgba(0,0,0,.9) -10%,rgba(0,0,0,.2) 60%)'
    });

    var s = .65; //start lum
    var d = .25; //delta lum

    //3d title effect
    $app.find('.appTitle').css({
        'color': cl(hex, s - d * 0),
            'text-shadow':
            '0 1px 0 ' + cl(hex, s - d * 1) + ',0 2px 0 ' + cl(hex, s - d * 2) + ',0 3px 0 ' + cl(hex, s - d * 3) + ',0 4px 0 ' + cl(hex, s - d * 4) + ',0 5px 0 ' + cl(hex, s - d * 5) + ',' +
            '0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15)'
    });

    s = -.1;
    d = .1;

    //3d app effect, TODO: having too many shadows causes animation slow downs, need to optimize
    $app.css({
        'box-shadow':
            '0 1px 0 ' + cl(hex, s - d * 0) + ',0 2px 0 ' + cl(hex, s - d * 1) + ',0 3px 0 ' + cl(hex, s - d * 2) + ',0 4px 0 ' + cl(hex, s - d * 3) + ',0 5px 0 ' + cl(hex, s - d * 4) + ',' + '0px 4px 15px -1px rgba(0, 0, 0, .5)'
    });
}

function animate($tmpEl, $moveToEl) {

    var oldTop = $tmpEl.position().top;
    var oldLeft = $tmpEl.position().left;
    var newTop = $moveToEl.position().top;
    var newLeft = $moveToEl.position().left;

    var $clone;

    if ($tmpEl.data('cloneExists')) {
        $clone = $tmpEl.data('cloneExists');
        $clone.css({
            backgroundColor: '#ec43ef'
        });
    } else {
        $clone = $tmpEl.clone().css({
            backgroundColor: '#ec43ef',
            position: 'absolute',
            top: oldTop,
            left: oldLeft
        }).disableSelection();
        $tmpEl.parent().append($clone);
        $tmpEl.data('cloneExists', $clone);
        $tmpEl.css('visibility', 'hidden');
    }

    $clone.stop().animate({
        backgroundColor: '#eee',
        top: newTop,
        left: newLeft
    }, 1000, function () {
        $clone.remove();
        $tmpEl.css('visibility', '');
        $tmpEl.data('cloneExists', '');
    });
}

function shiftElTo(el, destEl) {

    var $el = el.jquery ? el : $(el);
    var $destEl = destEl.jquery ? destEl : $(destEl);
    var elIndex = $el.index();
    var destElIndex = $destEl.index();
    var dir = destElIndex - elIndex;
    var max = Math.max(elIndex, destElIndex);
    var min = Math.min(elIndex, destElIndex);
    var $childrenArray = $el.parent().children();

    //shift all els between el and destEl
    for (var i = min; i <= max; i++) {
        var $tmpEl = $childrenArray.eq(i);
        var index = (dir > 0) ? $tmpEl.prev().index() : $tmpEl.next().index();
        var $moveToEl = $childrenArray.eq(index);

        if ($tmpEl.data('startEl')) { //TODO refactor this section
            var finalEl = (dir > 0) ? $childrenArray.eq(max) : $childrenArray.eq(min);
            $tmpEl.data("draggable").originalPosition = {
                top: finalEl.position().top,
                left: finalEl.position().left
            };
        } else {
            animate($tmpEl, $moveToEl);
        }
    }

    if (dir < 0) $el.insertBefore($destEl);
    else $el.insertAfter($destEl);
}

$(".app").draggable({
    zIndex: 10000,
    revert: true,
    helper: 'clone',
    distance: 7,
    refreshPositions: true,
    start: function (event, ui) {
        $(this).data('startEl', true).css('visibility', 'hidden');
    },
    stop: function (event, ui) {
        $(this).removeData('startEl').css('visibility', '');
    }
}).droppable({
    tolerance: 'pointer',
    over: function (event, ui) {
        shiftElTo(ui.draggable, this);
    },
    out: function (event, ui) {

    },
    drop: function (event, ui) {

    }
});

function stringToColor(str) {

    // str to hash
    for (var i = 0, hash = 0; i < str.length; hash = str.charCodeAt(i++) + ((hash << 5) - hash));

    // int/hash to hex
    for (var i = 0, colour = ""; i < 3; colour += ("00" + ((hash >> i++ * 8) & 0xFF).toString(16)).slice(-2));

    return colour;
}

function addHexColor(c1, c2) {
    var hexStr = (Math.min(parseInt(c1, 16) + parseInt(c2, 16), 16777215)).toString(16);
    while (hexStr.length < 6) {
        hexStr = '0' + hexStr;
    } // Zero pad.
    return hexStr;
}

function ColorLuminance(hex, lum) {
    // validate hex string
    hex = String(hex).replace(/[^0-9a-f]/gi, '');
    if (hex.length < 6) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }
    lum = lum || 0;
    // convert to decimal and change luminosity
    var rgb = "#",
        c, i;
    for (i = 0; i < 3; i++) {
        c = parseInt(hex.substr(i * 2, 2), 16);
        c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
        rgb += ("00" + c).substr(c.length);
    }
    return rgb;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255) throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

function hexToRGB(hex) {

    hex = (hex.charAt(0) == "#") ? hex.substring(1, 7) : hex;

    if (hex.length < 3) {
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
    }

    var r = parseInt(hex.substring(0, 2), 16);
    var g = parseInt(hex.substring(2, 4), 16);
    var b = parseInt(hex.substring(4, 6), 16);

    if (!r || !g || !b) throw ('hexToRGB: hex must be exactly 3 or 6 chars long');

    return [r, g, b];
}

$('html').disableSelection();
<div id='appGrid'></div>
.app {
    float: left;
    height: 180px;
    width: 180px;
    margin: 15px;
    border-radius: 20px 15px 15px 20px;
    position: relative;
    -moz-box-shadow: 5px 4px 5px rgba(0, 0, 0, .3);
    box-shadow: 0px 4px 15px -1px rgba(0, 0, 0, .5);
}
.app .appRibbon {
    content:"";
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 44px;
    border-radius: 15px 0px 0px 15px;
    -webkit-box-shadow: inset 0 8px 6px -6px black;
    -moz-box-shadow: inset 0 8px 6px -6px black;
    box-shadow: inset -5px 0px 4px -5px black;
}
.app .appIcon {
    position: absolute;
    margin: 7px 5px;
    width:32px;
    height:32px;
}
.app .appTitle {
    font-size:26px;
    position: absolute;
    bottom: 46px;
    right: 6px;
    width: 70%;
    text-align: right;
    color: #57CBF0;
    font-family: Helvetica;
    font-weight: bold;
    -webkit-text-fill-color: transparent;
}
.appGlimmerDiv {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 15px;
    background-position: -100px -400px;
    background-repeat:no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(37%, rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 255, 255, 0.7)), color-stop(50%, rgba(255, 255, 255, 0.0)));
    background-image: -moz-linear-gradient(0 0, rgba(255, 255, 255, 0) 37%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.0) 50%);
    -moz-background-size:250% 250%, 100% 100%;
    -o-background-size:250% 250%;
    background-size:250% 250%;
}
.appGlimmerDiv:hover {
    background-position: 25px 0px;
    -webkit-transition: background-position .5s ease-out;
    -moz-transition: background-position .5s ease-out;
    transition: background-position .5s ease-out;
}
body {
    background-color: grey;
}