title: CSS3 gradients in Webkit
link: http://jj.isgeek.net/2011/06/css3-gradients-in-webkit/
author: Jj
description: 
post_id: 719
date: 2011/06/08 00:55:30
created_gmt: 2011/06/08 05:55:30
comment_status: open
slug: css3-gradients-in-webkit

I'm just writing this to record a shorthand answer to a doubt I had. 

> Old format Webkit gradients only support percentage color stops

[Recently, Webkit added support](http://www.webkit.org/blog/1424/css3-gradients/) for [standards CSS3 gradients](http://dev.w3.org/csswg/css3-images/#linear-gradients), so your syntax will be the same for different engines (with different prefixes of course). 

This means that you can now set various color stops at different pixels instead of % of the container. 

`background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0, rgba(255,255,255,0) 80px); 

background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0, rgba(255,255,255,0) 80px); 

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.5)), color-stop(80px rgba(255,255,255,0))); /* BREAKS */ 

background-image: -o-linear-gradient(top, rgba(0,0,0,0.5) 0, rgba(255,255,255,0) 80px); 

background-image: linear-gradient(top, rgba(0,0,0,0.5) 0, rgba(255,255,255,0) 80px);`

![](/uploads/2011/06/screenshot_2011-06-08.004557.png)  
[gradients test ](/uploads/2011/06/gradients.html)