How to "CSS3 Gradient in Windows Phone 7"?

Question

I'm working in WP7 where my application is based in HTML5 and I'm exporting the app through PhoneGap framework.

I want to know if is possible and how to generate a CSS3 gradient for this project (and in the process, I want to share you what I've discovered).

At the moment this is my CSS3 code:

body {
    background: brown;
    background-image: url(blue_to_white.jpg);
    background: linear-gradient(blue, red); /*future CSS3 browsers*/
    background: -webkit-linear-gradient(blue, orange); /*new webkit*/
    background-image:  -ms-linear-gradient(bottom, blue 50%, green 50%); /* IE10 */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='purple'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='blue', endColorstr='yellow')"; /* IE8 */
    -pie-background: linear-gradient(blue, silver); /*PIE*/
    behavior: url(PIE.htc);
  }

As you can see, my code is using different techniques for the background:

A brown like color base
An image like gradient of blue to white
A normal CSS3 gradient of blue to red
A CSS3 gradient for webkit browsers of blue to orange
A CSS3 gradient for Microsoft browsers of blue to green
A DXImageTransform for IE6 & IE7 of blue to purple
A DXImageTransform for IE8 of blue to yellow
A pie-background using CSS3PIE of blue to silver

And this is my results: enter image description here

As you may know, the browser for WinPhone 7.5 is IE9 Mobile, and the browser for WinPhone 7.0 is a mix between IE7 & IE8. Here into slide 16, 17 and 18 explains which CCS3 properties are implemented in IE9, IE10 and "IE9 Mobile": http://goo.gl/1Wz3s

So, Any idea of how to generate a CSS3 gradient in Windows Phone? or I have no choice and I must implement an image to create this gradient?

With the HTML5 doctype and using your -ms-filter the gradient works fine on my WP7.5 Phone in Mobile IE. Could you post the full example html/css so we can see if something else is causing the problem? — pjumble
My code is too simple, so I don't think that exist a problem in the other code. — Julio Del Valle
This is all my code that I implemented: plus.google.com/100901511694449655005/posts/jZPUKy1p6By — Julio Del Valle
Ah sorry my mistake, if I run the .html file directly in Mobile IE the gradient works fine, however, if I run it through PhoneGap the gradient doesn't work. — pjumble

Michael Palermo Michael Palermo · Accepted Answer · 2012-02-16T22:10:45

Just wanted to show the correct syntax for CSS3 Gradients in IE10+

    background: -ms-linear-gradient(
                 bottom,                
                 #432100 30%,               
                 #00AAAA 70%);

In the google code link posted by JC Del Valle, he is using a backgroung-image definition, which is not correct.

[stack overflow prevented me from inserting image]

In the screen capure at twitter link (@palermo4), I tested your styles as-is. It appears to be working. Something else is in conflict with your CSS3 stuff.

How to "CSS3 Gradient in Windows Phone 7"?

1 Answers