Eine Sache, die man über Farbverläufe und „transparentes Schwarz“ wissen sollte

Nehmen wir an, Sie haben einen Farbverlauf in CSS, der von Rot zu transparent geht. Einfach, oder? So:

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

Es gibt hier jedoch einen ziemlich großen Haken.

In Chrome (auch Android), Firefox und Edge wären Sie bestens bedient.

Aber in Safari (auch iOS) wären Sie nicht bestens bedient.

Das Problem, soweit ich es verstehe, ist, dass transparent als „transparentes Schwarz“ interpretiert (und interpoliert) wird.

Um es zu beheben, müssen Sie die Farbe als eine vollständig transparente Version dieser exakten Farbe festlegen. So:

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

Das ist mit einem Hex-Code nicht immer einfach, da nicht offensichtlich ist, was das entsprechende RGBa- oder HSLa-Äquivalent ist. Es ist jedoch nicht schwer, einen Farbkonverter zu finden, suchen Sie einfach im Web.

Die CSS Level 4 color() Funktion wird dies erleichtern. So:

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

Aber die Unterstützung dafür ist noch nicht vorhanden.

Sass kann helfen, wenn Sie das verwenden

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