CSS3 Gradient with Transparency Not Displaying Correctly in Safari

CSS3 Gradient with transparency not displaying correctly in Safari

Try:
background: linear-gradient(rgba(255,255,255,0) 124px, #de6230);

Edit: sorry OP, that still doesn't look the same as your gradient although it is the correct colors, the gray middle just turned to a white middle. The solution I found was:

background: linear-gradient(rgba(222,98,48,0) 124px, #de6230);

222,98,48 is the rgb value of #de6230 so this should work. It's transitioning from your color at 0% alpha to your color at 100% alpha.

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 transparency misbehaving only in Safari

Instead of:

background: linear-gradient(to top, white, transparent);

Try setting your transparent to an rgba color value. For example:

background: linear-gradient(to top, white, rgba(255,255,255,0));

In other words, the rgb value of both colors should match. For example:

background: linear-gradient(to top, red, rgba(255,0,0,0));

As defined by the w3c spec, transparent is black transparent (rgba(0,0,0,0)). That means that when you are in the middle of the transition, some black should appear.

The color seen in Safari is the correct one, as per the specs.

CSS3 gradient rendering issues from transparent to white

I've encountered this as well. I'm not sure why it happens, but here's what I've used in my own projects as a workaround:

background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.001) 0%, #fff 5%, #fff 100%);

Instead of giving Chrome a "transparent" value, give it something very, very close to transparent.

Edit: I forgot to post a link to my own version, which renders as expected in Chrome 21 (Windows 7).

transparent linear gradient looking strange in safari

The transparent color keyword is a shortcut for rgba(0,0,0,0). That means Safari is creating a gradient from transparent black to --main-color. As the alpha channel transitions from 0–1, it gets gray, then as the RGB values transition to their values from --main-color, it becomes the correct color.

An alternate approach is to use the mask property on the .line element and get rid of the pseudoelement. (Note that Safari needs -webkit-mask, so I’m defining the mask in a custom property and applying to both mask and -webkit-mask for compatibility.)

:root {
    --main-color:#05e2ff
}

body {
    background-color: var(--main-color);
}

.line {
    position:relative;
    margin:0 auto;
    height:50vh;
    width:20px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2300B4D0'/%3E%3C/svg%3E%0A");
    --mask: linear-gradient(to bottom, black 50%, transparent);
    mask: var(--mask);
    -webkit-mask: var(--mask);
}

  <div class="line">

</div>

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 */

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

* {
  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>