A Thing To Know about Gradients and “Transparent Black”

Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this:

.element {
  background: linear-gradient(
    to bottom,
    red, 
    transparent
  );
}

There is a pretty big gotcha here, though.

In Chrome (also Android), Firefox, and Edge, you’d be all good.

But in Safari (also iOS), you’d not be good.

The problem, the best I understand it, is that transparent is being interpreted (and interpolated) as “transparent black”.

To fix it, you have to set the color as a fully transparent version of that exact color. Like:

.element {
  background: linear-gradient(
    to bottom,
    red,
    rgba(255, 0, 0, 0)
  )
}

That’s not always easy with a hex code, since it’s not obvious what the RGBa or HSLa equivalent is. It’s not hard to find a color converter though, just web search around.

The CSS Level 4 color() function will make this easier, Like:

.element {
  background: linear-gradient(
    to bottom,
    #eb8fa9,
    color(#eb8fa9 alpha(0%)) /* or is it color-mod()? */
  )
}

But the support for that isn’t around yet.

Sass can help out, if you are using that:

.element {
  background: linear-gradient(
    to bottom,
    #eb8fa9,
    rgba(#eb8fa9, 0);
  )
}