Alex Khomenko

WebKit color-stop procent in -webkit-gradient

As I’ve found out I can’t use more than 100% in WebKit implementtation of linear-gradient. So I need 150% in second color-stop -webkit-gradient(linear, left top, left bottom, color-stop(0, red), color-stop(1.5, blue));

WebKit implementation allow to use no more than 100%, but we can avoid this “feature” and use background-size: 1px 150%

In first case I have http://jsfiddle.net/okhomenko/GZP4x/:

#gradient {
    background-image: 
        -webkit-gradient(linear, left top, left bottom, 
                         color-stop(0, red), color-stop(1.5, blue);
}

And get:

And in case http://jsfiddle.net/okhomenko/GZP4x/1/

#gradient {
    height: 50px;
    
    background-image:
        -webkit-gradient(linear, left top, left bottom, 
                         color-stop(0, red), color-stop(1, blue));
    background-size: 1px 150%;
}

So if you want to customize your gradient in WebKit you can use this method. In FF4 everything works fine just like this - background-image: -moz-linear-gradient(top, red, blue 150%), so in some time I think it will work in WebKit