CSS Gradient on Android

Question

I'm trying to make this gradient to work on Android but I don't know the right css option.

HTML:

<div class="bottom-logo">
    <div id="logo" class="logo-menu-green">blaa</div>
</div>

Css:

#logo{
    font-family: "Lato", "Open Sans";
    font-weight: bold;
    position: absolute;
    z-index: 999;
    background: #6699cc;
    background: -moz-linear-gradient(left, #6699cc 0%, #3399cc 20%, #009999 37%, #009966 52%, #999999 68%, #9933cc 73%, #990099 90%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#6699cc), color-stop(20%,#3399cc), color-stop(37%,#009999), color-stop(52%,#009966), color-stop(68%,#999999), color-stop(73%,#9933cc), color-stop(90%,#990099));
    background: -webkit-linear-gradient(left, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%);
    background: -o-linear-gradient(left, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%);
    background: -ms-linear-gradient(left, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%);
    background: linear-gradient(to right, #6699cc 0%,#3399cc 20%,#009999 37%,#009966 52%,#999999 68%,#9933cc 73%,#990099 90%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6699cc', endColorstr='#990099',GradientType=1 );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

I tried but it doesn't work. Thank you.

EDIT:

A solution would be to use SVG filters.

http://caniuse.com/#search=gradient this version support gradient. Post your HTML+css — Anon, Oct 07 '14 at 20:01
this code work only in chrome. Property -webkit-text-fill-color: transparent; don't support by other browsers. I think that android 4.2.1 don't support this too — Anon, Oct 07 '14 at 20:12
http://stackoverflow.com/questions/18403028/cross-browser-css-3-text-gradient — Anon, Oct 07 '14 at 20:14

Kris · Answer 1 · 2014-10-10T07:25:19.017

Only solution i can think of after my fair share of issues with Android.

Replicate the gradient into a graphical tile, and merely change the following.

Took your code and imported it here.

Visual file

enter image description here

CSS

#logo{
    font-family: "Lato", "Open Sans";
    font-weight: bold;
    position: absolute;
    z-index: 999;
    background-image: url(img/thegradient.jpg);
    background-repeat: no-repeat;
}

Also the gradient didn't even appear until i removed these two lines

 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

If this is not what you were looking for i recommend using the javascript method introduced in the comments on your post.

Best of luck.

CSS Gradient on Android

1 Answers1