Is There an "Official"/Standard CSS3 Gradient Syntax

Is there an “official”/standard CSS3 gradient syntax?

An update for 2011, the Mozilla syntax is now the 'official' one, adopted by the CSS3 Image Values and Replaced Content Working Draft. Webkit has been updated to use this syntax too, and this has now been incorporated into the latest versions of Chrome and Safari.

CSS3 Radial gradients syntax explanation

-webkit-radial-gradient(50% 50%, 
                        200% 50%, 
                        hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%)

The radial-gradient provided above can be explained as follows:

• The gradient is a radial gradient which means the colors change in circular/elliptical path along a defined radius.
• The first parameter 50% 50% defines the position of the gradient image's center point. Here it is nothing but the center of the container element on which it is applied.
• The second parameter 200% 50% defines the radius of the gradient in X-axis and Y-axis. Here the radius is 200% of the container's width in X-axis and 50% of the container's height in Y-axis.
• The above setting along with the container's dimensions determine the shape of the gradient. If the container is 250px tall and 250px wide then the radius in X-axis would be 500px whereas the radius in Y-axis would be 125px and so the gradient would be elliptical. On the other hand if the container is 400px tall and 100px wide then the radius in X-axis would be 200px and the radius in Y-axis would also be 200px. So, the gradient's shape would be a circle.
• The next set of parameters define the colors and where they should end/stop. The gradient would have hsla(0, 0%, 90%, 1) as color till 5%, from 5% to 30% the color would gradually move from hsla(0, 0%, 90%, 1) to hsla(0, 0%, 85%, 1) and then from 30% to 100% it would move from hsla(0, 0%, 85%, 1) to hsla(0, 0%, 60%, 1).

---

The equivalent standard syntax for this radial-gradient would be the following:

background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);

The below snippet has the output of both of them for comparison.

div {  float: left;  height: 250px;  width: 250px;  border: 1px solid black;  margin-right: 4px;}.radial-grad {  background: -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);}
.radial-grad-standard {  background: radial-gradient(ellipse 200% 50% at 50% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);}

<div class='radial-grad'></div>
<div class='radial-grad-standard'></div>

Convert to CSS3 Gradient

Without seeing the colors you are working with, you want to do something like this

.class{
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
    background: -moz-linear-gradient(top, #fff, #000);
}

Here's a tool that might help:

http://gradients.glrzad.com/

CSS3 Gradients: How to make a 1px wide line

.style {        
    background-image: -o-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -moz-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
    background-image: -webkit-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 0%, rgb(255,255,255) 50.5%);
    background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
}

You are not dealing with pixels, you are using percentages. So 1% of your width, which must be 200 is 2px. (I think that is why this works, maybe I'm wrong.) You can use percentages decimals, so .5% == 1px.

How do I combine a background-image and CSS3 gradient on the same element?

Multiple backgrounds!

body {  background: #eb01a5;  background-image: url("IMAGE_URL"); /* fallback */  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */}

CSS Future Proof Linear Gradient

Is it wise to add a prefix-less version as well?

Yes, you should always provide the un-prefixed version of any prefixed CSS code you use.

What would it be?

In the case of gradients, the version you have is the same as the standard; just drop the prefix.

But note that there was also an earlier variant of the webkit syntax for gradients, which you may also want to specify if you want to support older webkit browsers.

You should also include a plain colour background as a fallback for unsupported browsers.

If you're in any doubt about these things, consult sites like CanIUse or MDN.

If you want to get really cross-browser compatible, you may also note the IE9 and earlier do not support CSS gradients at all (with or without prefix). The plain colour fallback will work, but if you want a gradient there are alternative solutions (my preferred option is generally CSS3Pie, but there are pure CSS options if you prefer; they're not nice though).

linear-gradient not working in Chrome

First of all note that -webkit-gradient was intended by Apple and implemented in 2008 in Webkit based web browsers (for instance Safari 4) which has a pretty different syntax than the W3C standard:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

For instance:

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));

This is why you couldn't get it to work in your case.

A year later Mozilla introduced -moz-linear-gradient (since Firefox 3.6) which has also a different syntax than the old Webkit version but then it implemented in Webkit under -webkit-linear-gradient:

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)

However the W3C standard version of linear-gradient is quiet different, the formal syntax of linear-gradient() expression is:

linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

As can be seen in your posted code, the other mistake is the lack of to <side> in the W3C version. Therefore, in your case it should be:

Example Here.

background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%,#fff), color-stop(100%,transparent)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* Chrome10+, Safari5.1+ */
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);    /* FF3.6+ */
background: linear-gradient(to left, transparent 0%,#fff 50%,transparent 100%);      /* W3C */

---

Related Topics