Question

I am developing an Application with jQuery Mobile and Phonegap. I want to have a color gradient from #3c3c3c (grey) to #000000 (black) in the background but when I use this code

background:  -webkit-linear-gradient(top, #3c3c3c, #000000);

you can see just a few big bars with different grey shades. So there is no linear gradient. Also you are able to see some green and some violet bars.

  - Sorry as a new user I am not able to insert a Screenshot - 

I also tried to instead insert a background image which shows a color gradient but this also looks as described above (we have also tried to maximize the color-depth of the picture but this also did not change the result).

Is it possible that the device is not able to display enough colors for a linear gradient?
Is there another possibility for creating a linear gradient?

Any help is greatly appreciated!

I am testing with
Galaxy Tab GT-P1000
Firmware-Version 2.2

Answer 1

To cover all your bases:

        background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c), to( #000000)) !important; /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(#3c3c3c, #000000) !important; /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient(#3c3c3c, #000000) !important; /* FF3.6 */
        background-image:     -ms-linear-gradient(#3c3c3c, #000000) !important; /* IE10 */
        background-image:      -o-linear-gradient(#3c3c3c, #000000) !important; /* Opera 11.10+ */
        background-image:         linear-gradient(#3c3c3c, #000000) !important;

Drop the !important if you don’t need it, I use it to override some default jQM styles that’s why and make sure you have background-clip: border-box; (which is default)