CSS Class for linear-gradient

Question

I am looking for a mechanism (CSS or JS) to make this:

<div class='someclass gradient gr-red-gr-blue'>Text</div>

to this:

<div class='someclass' style='background-image: linear-gradient(to bottom, #ff0000 0px, #0000ff 100%);'></div>

I want it to be fast and simple.

My first try is:

$('.gradient').each(function () {
        var className = $(this).attr("class");
        var values = className.split(" ");
        for (var j = 0; j < values.length; j++) {
            values[j] = values[j].trim();
            if (values[j].indexOf("gr-") == 0) {
                var colors = values[j].split('gr-');
                for (var i = 0; i < colors.length; i++) {
                    colors[i] = colors[i].trim().trim('-');
                    alert(colors[i]);
                }
            }
        }
    });

It's via JS. I know, maybe it's not correct, but speed and being simple for browser is very important.

I prefer it to be just CSS.

Update: Also I want it to be dynamically, and not like this:

.gr-red-gr-blue { background-image: linear-gradient(to bottom, #ff0000 0px, #0000ff 100%); }

Thanks all.