线性渐变的CSS类

Question

我正在寻找一种机制（CSS或JS）来实现这个目标：

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

到此：

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

我希望它快速而简单。

我的第一次尝试是：

$('.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]);
                }
            }
        }
    });

这是通过JS。我知道，也许这不正确，但浏览器的速度和简单性非常重要。

我更喜欢它只是CSS。

更新：我也希望它是动态的，而不是像这样：

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

谢谢大家。