Jak dodać tło gradientowe dla tekstu w CSS?

4 kwietnia, 202018 kwietnia, 2020 CSS, Frontendcss snippet, gradient

Kilka linijek kodu CSS, który doda piękny efekt gradientowego tekstu do strony internetowej.

Uwaga! Gradient nie jest ustawiany dla właściwości text-decoration.

Gradientowy tekst – kod

.text-with-gradient {
  background: linear-gradient(20deg, #7846FF, red);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Efekt

background: linear-gradient

Jako background zostaje ustawiony gradient. W podanym przykładzie ustawiony jest kąt, pierwszy kolor oraz drugi kolor gradientu.

Zobacz więcej opcji linear-gradient().

background-clip: text;

W tym miejscu ustawiane jest jak ma się zachowywać tło (do czego ma się „przycinać„).

Zobacz więcej na temat background-clip.

-webkit-background-clip: text;

Jak wyżej – tylko dla silników webkit.

-webkit-text-fill-color: transparent

Należy wyłączyć wypełnienie kolorem (ustawiane poprzez właściwość color) dla webkit. Inaczej nie będzie widać gradientu, ponieważ color będzie ważniejszy. Można również ustawić color: transparent.

Podgląd na CodePen

See the Pen Gradient background for text in CSS by pbasiak (@pebe) on CodePen.