CSS gradient not working on iOS

Question

I have created a gradient background using a CSS generator. This works perfectly in all major browsers and on Android. However in iOS i get this.

What do I need to add to this gradient in order to make it working on iOS?

Edit: Because this question isn't gaining enough attention, I'd like to ask a different question: What do I need for css tag to create a linear gradient for safari/ios, when, as in this case, -webkit-linear-gradient is not working? Are there any other css gradient tags, specifically for safari?

Here's the code for my background:

.gradient {
/* Legacy browsers */
background: #FF7701 url("gradient-bg.png") repeat-x top;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
/* Internet Explorer */
*background: #FF7701;
background: #FF7701\0/;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale");
}
@media all and (min-width: 0px) {
    .gradient {
        /* Opera */
        background: #FF7701 url("gradient-bg.svg");
        /* Recent browsers */
        background-image: -webkit-gradient(
            linear,
            left top, left bottom,
            from(#FFAD26),
            to(#FF7701),
    color-stop(0.5, #FEA026),
    color-stop(0.5, #FFFFFF),
    color-stop(0.5, #FFFFFF),
    color-stop(0.5, #FFFFFF),
    color-stop(0.5, #FF8B00)
        );
        background-image: -webkit-linear-gradient(
            top,
            #FFAD26,
            #FEA026 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FF8B00 50%,
    #FF7701
        );
        background-image: -moz-linear-gradient(
            top,
            #FFAD26,
            #FEA026 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FF8B00 50%,
    #FF7701
        );
        background-image: -o-linear-gradient(
            top,
            #FFAD26,
            #FEA026 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FF8B00 50%,
    #FF7701
        );
        background-image: linear-gradient(
            top,
            #FFAD26,
            #FEA026 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FFFFFF 50%,
    #FF8B00 50%,
    #FF7701
        );
    }
}

score 66 · Answer 1 · edited Dec 11 '19 at 11:33

66

In mobile Safari at least, you can't use the keyword transparent, you have to use rgba(255, 255, 255, 0) instead.

This is described here: https://developer.apple.com/library/safari/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradient.html

As you can see, even in Apple's own official document, rgba(255, 255, 255, 0) is used instead of transparent.

edited Dec 11 '19 at 11:33

Neurotransmitter

6,289
2
51
38

answered Nov 25 '14 at 04:28

Pencilcheck

2,664
3
25
14

Thank you this solves one of the issues I've been having – Andre Jul 09 '15 at 12:25
1

This works (at least on iOS 8) and is the simplest solution, by far. – Bill Doughty Jul 09 '15 at 13:38
1

Thank you. This works for me, fading from transparent to a solid color and back again: `linear-gradient(to right,rgba(255, 249, 240, 0), rgba(255, 249, 240, 1), rgba(255, 249, 240, 0))`. It looks great on all devices now! – Tustin2121 Nov 20 '15 at 17:21
This just helped me too, thanks! It's only gradients that have trouble with the `transparent` keyword on iOS, or do other properties require rgba too? – andi Aug 15 '16 at 13:55
OP didn't use `transparent`... Am I missing something? – Ryne Everett Sep 28 '16 at 20:10
This solved a problem I had at work. You can reproduce the behavior using this codepen if you've got mobile iOS (Tested on iPad 10.3.3) https://codepen.io/phebert/pen/MGyqeo – Paul-Hebert Apr 24 '18 at 17:52
This is amazingly annoying behavior. Does Apple provide any reason they don't respect `transparent` as a color in gradient? Literally no other browser has the same limitation. – bsplosion Nov 28 '21 at 15:21

score 14 · Accepted Answer · answered Jun 05 '13 at 22:50

Do give this a check in iOS but it ought to work:

background: #ffad26; /* Old browsers */
background: -moz-linear-gradient(top,  #ffad26 0%, #fea026 50%, #ff8b00 51%, #ff7701 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffad26), color-stop(50%,#fea026), color-stop(51%,#ff8b00), color-stop(100%,#ff7701)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffad26', endColorstr='#ff7701',GradientType=0 ); /* IE6-9 */

I'd also recommend looking into a pre-processor like SASS which will generate a lot of these things for you.

Alternative 1

As an alternative, you could try using an inset box shadow. It's not exact, and it has it's limitations but it's just an option :)

background-color:#FF8B00;
-webkit-box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);
box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);

Alternative 2

If you know the height, either use the box shadow above or just use a background image. That way you'll get cross-browser support without the mess that is a hundred prefixed CSS properties like above :)

Hmm, I don't have an ipad myself so a friend is testing for me with both an ipad mini and a ipad 3. On the mini it works, but not on the ipad 3... I have applied your code now, could you test for me if it works for you? Check: http://rickgommers.nl/geoffrey/ — Forza, Jun 06 '13 at 13:56
see my reply above. It doesn't work as it's supposed too. I'd like to reward you with the bounty, but therefore we have to fix this first :) — Forza, Jun 08 '13 at 22:51
@Forza Try specifying a height on your element. Try height:100%, for example. If that doesn't work, I'm not sure there is a CSS-only solution other that what I've written above. If that doesn't work, I'd use an image and tile it using background-repeat: repeat-y; — rob_mccann, Jun 09 '13 at 00:13
That image worked lol. Crap CSS working different in every browser... Good old image fixed it :) Thx Rob! — Forza, Jun 09 '13 at 12:11
@Forza its not fair to blame this on CSS. Each browser dictates how much of css it will support and how well. I am sure you wouldnt blame the W3C for the troubles you used to have on IE. — appthat, Dec 24 '14 at 21:52

yeyene · Answer 3 · 2013-06-06T07:57:33.250

Working DEMO here http://jsfiddle.net/yeyene/akRHX/

And its iPhone screenshot...

enter image description here

add your css class to the element.

HTML

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">

       <div class="ui-grid-a">
           <div class="ui-block-a"><div class="ui-bar gradient" style="height:200px">Block A</div></div>
            <div class="ui-block-b"><div class="ui-bar gradient" style="height:200px">Block B</div>
       </div>

</div><!-- /grid-a -->

    </div><!-- /content -->


</div><!-- /page -->

CSS

.gradient {
    /* Legacy browsers */
    background: #FF7701 url("gradient-bg.png") repeat-x top;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    /* Internet Explorer */
    *background: #FF7701;
    background: #FF7701\0/;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale");
    }
    @media all and (min-width: 0px) {
        .gradient {
            /* Opera */
            background: #FF7701 url("gradient-bg.svg");
            /* Recent browsers */
            background-image: -webkit-gradient(
                linear,
                left top, left bottom,
                from(#FFAD26),
                to(#FF7701),
        color-stop(0.5, #FEA026),
        color-stop(0.5, #FFFFFF),
        color-stop(0.5, #FFFFFF),
        color-stop(0.5, #FFFFFF),
        color-stop(0.5, #FF8B00)
            );
            background-image: -webkit-linear-gradient(
                top,
                #FFAD26,
                #FEA026 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FF8B00 50%,
        #FF7701
            );
            background-image: -moz-linear-gradient(
                top,
                #FFAD26,
                #FEA026 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FF8B00 50%,
        #FF7701
            );
            background-image: -o-linear-gradient(
                top,
                #FFAD26,
                #FEA026 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FF8B00 50%,
        #FF7701
            );
            background-image: linear-gradient(
                top,
                #FFAD26,
                #FEA026 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FFFFFF 50%,
        #FF8B00 50%,
        #FF7701
            );
        }
    }

score 3 · Answer 4 · answered Feb 03 '22 at 13:33

For me the following worked and this worked for me in desktop browser, android and ios:-

display: list-item;
background-image: linear-gradient(45deg, #2b4bff, #1b681f);
background-clip: text;
color: rgba(255, 255, 255, 0);

I was using display:flex and that did not work and I had to change to list-item.
Color I was using 'transparent' and now I am using rgba(255, 255, 255, 0)

Some helpful notes: The property background-clip: text; only works in Safari when applied directly to the element you want styled. You cannot apply it to a parent element and style all children at once. (This does work in Chrome and Firefox) enter link description here

color rgba(255, 255, 255, 0) instead of transparent fixed the problem for me! — Mo Halem, Nov 14 '22 at 12:12

CSS gradient not working on iOS

4 Answers4

HTML

CSS

Linked

Related