JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.rightjs.org/right.js"></script>
<div id="vertical"></div>
<div id="horizontal"></div>

CSS

#vertical, #horizontal {
    width: 300px;
    height: 300px;
    background: red;
}

JavaScript

Element.include({
    setStyle: function(hash, value) {
        var args = arguments;

        if(isHash(value) && 'type' in value && value.type == 'gradient') {
            /*
             * This expects value as
             * type -> gradient
             * start -> top/bottom/left/right
             * stops: <float [0, 1]> -> CSS color
             *
             * The syntax supports just FF and Webkit for now.
             * Also limited to basic, linear gradients.
             **/
            var stop, color, stopValue;
            var realValue = '';

            if(RightJS.Browser.Gecko) {
                realValue += '-moz-linear-gradient(' + value.start;

                for(stop in value.stops) {
                    color = value.stops[stop];
                    stopValue = stop * 100;

                    realValue += ',' + color + ' ' + stopValue + '%';
                }

                realValue += ')';
            }
            else {
                // assume webkit for now
                realValue += '-webkit-gradient(linear,';

                realValue += {
                    left: 'left bottom, right bottom',
                    right: 'right bottom, left bottom',
                    top: 'left top, left bottom',
                    bottom: 'left bottom, left top'
                }[value.start];

                for(stop in value.stops) {
                    color = value.stops[stop];
                    stopValue = stop * 100;

                    realValue += ',color-stop(' + stopValue + '%,' + color + ')';
                }

                realValue += ')';
            }

            args = [hash, realValue];
        }
        
        return this.$super.apply(this, args);
    }
});

// a couple of quick demos showing how to use the syntax
$('horizontal').setStyle('background', {
    type: 'gradient',
    start: 'left',
    stops: {
        0: 'rgba(255, 0, 255, 1)',
        1: 'rgba(255, 255, 255, 0)'
   ...