How to Set Gradient Background Transparency on iOS Safari

How to set gradient background transparency on iOS Safari?

Use rgba instead of transparent.

.map-left-navi {
    background: #ffffff;
    background: -moz-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: -webkit-linear-gradient(left, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    background: linear-gradient(to right, rgba(255,255,255, 0.35), rgba(255,255,255, 0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='transparent',GradientType=1 );
}

transparent show black color on IOS 14 and up

Instead of using the 'transparent' keyword, use the pink color in RGB with full transparent:

rgb(255 192 203 / 0%) /* transparent pink */

This will solve your problem.

CodePen Demo (the third option is my own solution)

CSS gradient not working on iOS

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 :)

Transparent gradient not working in Safari

This issue is known and best explained in the link below:

https://css-tricks.com/thing-know-gradients-transparent-black/

Below are few related links on github for the same issue:

https://github.com/jakubpawlowicz/clean-css/issues/315

https://github.com/Compass/compass/issues/2010

Eventually I believe that you need a work around to do so until they come up with a fix in future releases.

Best Wishes

CSS Linear Gradient Color Darkens on Mobile iOS compared to Major Desktop Browsers

Don't use the transparent value in CSS gradients. iOS assumes that "transparent" means "black transparent," or rgba(0,0,0,0). Instead, switch it to a transparent version of the color you're using, e.g., rgba(220 170 80 / 0).

How to add background linear-gradient to iOS Safari, Mac Safari, Edge, and IE11?

Double position color stops are not supported in IE/Edge and Safari < v13.

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Simply change your code as such:

background:
    linear-gradient(to left ,#000 10px,transparent 10px, transparent 30px, #000 0) top,
    linear-gradient(to right,#000 10px,transparent 10px, transparent 30px, #000 0) bottom;

Safari linear gradient

This is a bug in safari that has to do with the way browsers interpolate between gradients.

A common answer is to do what you did, using rgba(255, 255, 255, 0), however, Safari still interprets this as white and leads to that unwanted additional of white to the gradient. A fix is to use the same color you are transitioning from (coral in this case) and set it to transparent, which for coral would be rgba(255, 127, 80, 0). The example below uses the code from your pen with the fix applied for safari.

See this stack for more

* {
  margin: 0;
}

.gradient-container {
  background-color: coral;
  width: 200px;
  height: 30px;
  position: relative;
  display: flex;
  align-items: center;
}

.elements {
  padding: 0 10px;
  display: flex;
  column-gap: 10px;
  overflow-x: hidden;
}

.elements p {
  color: #fff;
  white-space: nowrap;
}

.gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*RGBA equivalent to coral html color with alpha set to 0 - fixes safari interpolation bug*/
  background: linear-gradient(to right, rgba(255, 127, 80, 0) calc(100% - 50px), coral);
}

<div class="gradient-container">   
  <div class="elements">
    <p>Element 1</p>
    <p>Element 2</p>
    <p>Element 3</p>
  </div>
  <div class="gradient"></div>
</div>

iOS Safari: CSS gradient too dark when placed over similarly colored background

Safari is rendering correctly.

With linear-gradient you can define:

linear-gradient( 
  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop>     = <color> [ <percentage> | <length> ]?

So your gradient goes from black with zero opacity (rgba(0,0,0,0)) to your desired color (#034b81).

See: rgba(red,green,blue,opacity)

That's why you see that black line in Safari.

To achieve your desired appearance, just change the rgba value to the value of your color. so your code should look like:

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(3, 75, 129, 0)), color-stop(100%, #034b81));
background-image: -moz-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: -webkit-linear-gradient(rgba(3, 75, 129, 0), #034b81);
background-image: linear-gradient(rgba(3, 75, 129, 0), #034b81);

Demo

div {  position: relative;  width: 100%;  height: 300px;  background-color: #034b81;  color: white;  overflow: hidden;}div:after {  content: ' ';  position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 25px;  background-size: 100%;  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(3, 75, 129, 0)), color-stop(100%, #034b81));  background-image: -moz-linear-gradient(rgba(3, 75, 129, 0), #034b81);  background-image: -webkit-linear-gradient(rgba(3, 75, 129, 0), #034b81);  background-image: linear-gradient(rgba(3, 75, 129, 0), #034b81);}

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies eget quam sit amet eleifend. Sed luctus risus justo, ut finibus metus commodo ut. Curabitur sit amet lobortis mi. Curabitur vel felis id ante accumsan imperdiet. Etiam at ornare ligula.  Morbi consequat fermentum eros nec fermentum. Donec sodales molestie odio sollicitudin bibendum. Morbi semper ac nisl mattis semper. Donec sed lacus viverra, congue massa at, accumsan orci. Mauris et condimentum quam. Etiam imperdiet tempor quam non  aliquam. Integer et pharetra metus, et porttitor velit. Mauris at turpis dui. Etiam odio felis, placerat sit amet massa et, suscipit pretium eros. Nulla iaculis elit id turpis dictum, id scelerisque est eleifend. Quisque in ex tincidunt, bibendum nisl  non, tristique ligula. Curabitur venenatis purus nec sem placerat, sed sollicitudin libero tincidunt. Etiam ac turpis mattis, lobortis quam quis, sagittis nisi. Vivamus eget nisl commodo, vestibulum augue varius, pretium augue. Cras ultricies, velit  nec ultrices commodo, leo enim dignissim odio, vitae aliquam nibh ex nec elit. Duis egestas faucibus turpis, nec tristique nisl accumsan nec. Phasellus lacus massa, vulputate sed nisl lacinia, pretium vestibulum mi. In tincidunt luctus dictum. Praesent  elementum lorem eu erat mattis, quis convallis massa tristique. Cras rhoncus gravida dolor et rhoncus. Etiam et malesuada dolor. Sed in eros magna. Duis faucibus, ipsum eget ultrices dignissim, ipsum nunc consectetur nulla, in egestas nibh eros eget  turpis. Phasellus vestibulum mollis ullamcorper. Maecenas lectus mi, hendrerit vel justo at, dictum varius lectus. Cras ac libero vehicula, interdum eros sagittis, tristique tellus. Mauris tincidunt porttitor nisl, nec aliquam velit egestas nec. Mauris  nec gravida ipsum. Curabitur tempor velit nulla, sit amet laoreet elit euismod ac. Ut eros metus, consectetur sit amet purus eget, semper cursus nibh. In dolor nisl, vulputate ac augue et, luctus faucibus mauris. Donec eu ex ex. Donec ut elementum ligula.  Donec nisl justo, pharetra eget quam id, commodo lobortis augue. Suspendisse sit amet tellus interdum, tempor odio nec, iaculis sapien. Praesent maximus quis lacus a condimentum. Morbi convallis sem metus, vitae lacinia dui interdum sed. Proin eget  volutpat ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut molestie consectetur sem, at venenatis justo volutpat in. Sed lobortis dui vitae quam facilisis, gravida mattis justo volutpat. Aliquam elementum  non nunc consequat elementum. Vestibulum vitae sodales nulla, a iaculis tellus. Nullam tincidunt, dui sed elementum dapibus, mauris turpis aliquam odio, id laoreet nisl sapien a metus. Suspendisse potenti. Integer viverra fermentum nulla at sodales.  Proin viverra nulla eu felis tempus, vitae lacinia velit commodo. Phasellus eu nulla elementum, consequat orci eu, interdum metus. Nunc in tellus sed arcu egestas ullamcorper fringilla non purus. Nunc efficitur elementum sapien, in mollis diam volutpat  at. Suspendisse non luctus risus. Nam rutrum est ligula, vel scelerisque felis volutpat id. Maecenas ornare molestie dui sed varius. Praesent vulputate dui purus, sed venenatis purus pellentesque ac. Etiam neque arcu, imperdiet sed enim in, laoreet  ultrices nisl. Phasellus rhoncus lobortis ipsum, viverra accumsan eros feugiat id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget commodo risus. Donec tellus elit, imperdiet a fermentum eget,  lobortis ac diam. Nulla dictum eros at neque tincidunt, at commodo tortor ultrices. In dapibus risus at tellus lobortis condimentum. In hendrerit et erat sit amet scelerisque. Vestibulum ultricies egestas efficitur. Ut finibus dolor et leo lobortis  egestas. Nulla aliquam quam ut metus molestie tincidunt. Aenean ac commodo mauris. Nullam ultrices urna nisi, vitae commodo quam viverra pulvinar.</div>

---

Related Topics