not displaying background gradient color at runtime

not displaying background gradient color at runtime

Hi, we are using the version Service Studio. I created a panel with background gradient color in CSS. During the design time, I am able to see the effect. But when i run it, no matter firefox or IE, i do not see the effect. Actually the background turns into white.

here is the CSS code i put in:

  background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
Hello Alick,

Here by a link to a fiddle that I create to help you out:

Should work if you implemented as above.
Is that panel implemented in one div?

Hope it helps you!

Best regards

Daniel Martins
Good morning Daniel,
here is the div i put in the css:
.RoundPanelGrad {
     border-radius: 10px;
     padding: 15px;
       box-shadow: 10px 10px 5px #C0C0C0;
         background: -webkit-linear-gradient(left, #606060, #E8E8E0); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, 606060 , #E8E8E0); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, 606060 , #E8E8E0); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, 606060 , #E8E8E0); /* Standard syntax */
I click the link to fiddle, i also see white background on my screen.

actually i use chrome or ipad to view it, it is perfect. Me and my colleagues have IE 8, 9 and 11, they donot see the correct background, nor my firefox 32. This is very interesting. Again, the problem only happens at runtime, not design time though.
Hi Alick,

Service Studio uses a webkit based rendering, so it will follow the "-webkit-" rule as Chrome does, or the standard one if valid.

For Firefox, IE 10 and IE 11 you are missing the # character on the first color, making it invalid.
Works if you add it: (tested in firefox 35 ...but should work on all 16+ as well)

For IE 8 and 9 it just won't work, since it doesn't support gradients at all. Please don't try to use the filters to make it work there experience with filters = memory leaks.

João Rosado
Hi again,

Tested it a bit more and noticed a couple more problems with your css.
Also following the recommendations from MDN:

Here is an updated jsfiddle:

So what changed:
  • On opera and in firefox 3.6 - 16 the gradient was being showed inversed when compared with Chrome and other versions of Firefox. So changed the "right" to "left" on those 2.
  • Changed the "background" to "background-image" (think this is to prevent it from overriding the "background-color")
  • Start with a "background-color" so that if it's shown in IE 8 and 9 it has a color to fallback to (you may need to ajust the fallback color)

João Rosado
Thank you so much João , it works in my firefox and IE 11. You guys are awesome