css.html

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.6/dragula.min.css" media="screen">
<style type="text/css" media="screen">
* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    width: 100%;
}
body {
    background-color: #000;
    color: #eee;
    font-weight: 300;
    font: 14px "Helvetica Neue", helvetica, arial, sans-serif;
    margin: 0;
    padding: 0;
}
h3 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    font-weight: 300;
    padding-bottom: 5px;
    text-transform: uppercase;
}
label {
    display: block;
}

input[type="text"] {
    border: none;
    padding: 5px;
    width: 100%;
}

#canvas {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 100%;
    width: 100%;
}

#panel {
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    margin: 15px;
    overflow: hidden;
    padding: 15px;
    position: absolute;
    top: 0;
    width: 250px;
}

#backgrounds,
#filters {
    list-style-position: inside;
    padding-left: 0;
}
#backgrounds li,
#filters li,
#blend-modes label {
    cursor: move;
}
</style>

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

<div id="panel">
    <h3>Background Color</h3>
    <input id="background-color" type="text" value="">

    <h3>Background</h3>
    <input id="background" type="text" value="">
    <ul id="backgrounds"></ul>

    <h3>Background Blend Mode</h3>
    <div id="blend-modes">
        <label><input type="checkbox" value="color"> Color</label>
        <label><input type="checkbox" value="color-burn"> Color burn</label>
        <label><input type="checkbox" value="color-dodge"> Color dodge</label>
        <label><input type="checkbox" value="darken"> Darken</label>
        <label><input type="checkbox" value="difference"> Difference</label>
        <label><input type="checkbox" value="exclusion"> Exclusion</label>
        <label><input type="checkbox" value="hard-light"> Hard light</label>
        <label><input type="checkbox" value="hue"> Hue</label>
        <label><input type="checkbox" value="lighten"> Lighten</label>
        <label><input type="checkbox" value="luminosity"> Luminosity</label>
        <label><input type="checkbox" value="multiply"> Multiply</label>
        <label><input type="checkbox" value="overlay"> Overlay</label>
        <label><input type="checkbox" value="saturation"> Saturation</label>
        <label><input type="checkbox" value="screen"> Screen</label>
        <label><input type="checkbox" value="soft-light"> Soft light</label>
    </div>

    <h3>Filters</h3>
    <input id="filter" type="text" value="">
    <span style="color: rgba(255, 255, 255, 0.5); font-size: 80%;">blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, url</span>
    <ul id="filters"></ul>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.6.6/dragula.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
    function refreshBackground() {
        var backgrounds = [];
        $('#backgrounds li').each(function(index, el) {
            backgrounds.push(el.textContent);
        });
        if (backgrounds.length > 0) {
            $('#canvas').css('background', backgrounds.join(','));
        } else {
            $('#canvas').css('background', '');
        }
    }
    function refreshBlendMode() {
        var modes = [];
        $('#blend-modes input[type=checkbox]:checked').each(function(index, el) {
            modes.push(el.value);
        });
        $('#canvas').css('background-blend-mode', modes.join(','));
    }
    function refreshFilter() {
        var filters = [];
        $('#filters li').each(function(index, el) {
            filters.push(el.textContent);
        });
        console.log(filters);
        if (filters.length > 0) {
            $('#canvas').css('-webkit-filter', filters.join(' '));
            $('#canvas').css('filter', filters.join(' '));
        } else {
            $('#canvas').css('-webkit-filter', '');
            $('#canvas').css('filter', '');
        }
    }

    dragula([document.querySelector('#backgrounds')]).on('drop', refreshBackground);
    dragula([document.querySelector('#blend-modes')]).on('drop', refreshBlendMode);
    dragula([document.querySelector('#filters')]).on('drop', refreshFilter);

    // Set the background color.
    $('#background-color').change(function(e) {
        $('#canvas').css('background-color', e.target.value);
    });

    // Add a background image.
    $('#background').keydown(function(e) {
        if (e.keyCode == 13) {
            $('#backgrounds').append('<li>' + e.target.value + '</li>');
            refreshBackground();
            e.target.value = '';
        }
    });

    // Remove a background image.
    $(document).on('click', '#backgrounds li', function(e) {
        $(e.target).remove();
        refreshBackground();
    });

    // Set blend mode.
    $('#blend-modes input[type=checkbox]').change(refreshBlendMode);

    // Add a filter.
    $('#filter').keydown(function(e) {
        if (e.keyCode == 13) {
            $('#filters').append('<li>' + e.target.value + '</li>');
            refreshFilter();
            e.target.value = '';
        }
    });

    // Remove a filter.
    $(document).on('click', '#filters li', function(e) {
        $(e.target).remove();
        refreshFilter();
    });
});
</script>