CODEWITHSUNDEEP
htmlcss
Ankush Jain
Ankush Jain

Reputation: 1527

Dynamic gradient in css

I want to make a dynamic gradient. I have a single color and i want to generate 5 color's gradient same as below. eg.

background-image: -webkit-linear-gradient(top, 
rgba(235, 82, 164, 1.00) 0% ,
rgba(244, 49, 153, 1.00) 18% ,
rgba(245, 0, 130, 1.00) 56% ,// this color i have 
rgba(196, 0, 104, 1.00) 84% ,
rgba(171, 0, 91, 1.00) 100% );

Is there any way to get 4 other colors similar to original color in order to get a good effect. (Colors order is light to dark)

Upvotes: 1

Views: 1576

Answers (1)

PatrikAkerstrand
PatrikAkerstrand

Reputation: 45721

This functionality is built into most CSS frameworks, such as SASS, LESS etc. If you want to know how it is done, take a look at the source code for the language of your choice. It is however done during compilation of a stylesheet, so once the compilation is complete, the rule is generated as static code.

For instance, this is from the LESS source code:

[...]
lighten: function (color, amount) {
    var hsl = color.toHSL();

    hsl.l += amount.value / 100;
    hsl.l = clamp(hsl.l);
    return hsla(hsl);
},
darken: function (color, amount) {
    var hsl = color.toHSL();

    hsl.l -= amount.value / 100;
    hsl.l = clamp(hsl.l);
    return hsla(hsl);
}
[...]

function clamp(val) {
    return Math.min(1, Math.max(0, val));
}
[...]
toHSL: function () {
    var r = this.rgb[0] / 255,
        g = this.rgb[1] / 255,
        b = this.rgb[2] / 255,
        a = this.alpha;

    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2, d = max - min;

    if (max === min) {
        h = s = 0;
    } else {
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

        switch (max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2;               break;
            case b: h = (r - g) / d + 4;               break;
        }
        h /= 6;
    }
    return { h: h * 360, s: s, l: l, a: a };
}

Upvotes: 2

Related Questions