Efekt łagodnego przejścia z koloru jednego do drugiego tylko w tekście

Question

Witam.
Próbuję zrobić efekt łagodnego przejścia z koloru jednego do drugiego tylko w tekście, a nie w tle.

Dla tła dałem taki zapis w CSS i jest OK:

background: linear-gradient(to right, black, white);

Dla tekstu dałem taki zapis:
tekst nr 1:

color: linear-gradient(#bfbfbf, #919191);

tekst nr 2:

color: linear-gradient(#d72a18, #b60803);

i niestety te oba zapisy nie przyniosły zamierzonego efektu.

Zamiast #bfbfbf albo #d72a18 mam stosować tylko standardową nazwę koloru, np. silver, gray, red?

Chciałbym mieć do wyboru więcej kolorów, a nie ograniczać się tylko do podstawowych (jest ich ok 15).

Wiecie jak zrobić, aby w tekście można było mieszać kolory stosując hashtagi (#......)?

Answer 1

To wygląda super: https://css-tricks.com/snippets/css/gradient-text/

Comments

Robi to niezły efekt, ale pod oba tekstami znajduje się pozioma kreska w kolorze fioletowym. Jak pozbyć się tej kreski?

<div id="header">
	<div class="text">
		<a href="index.php">Strona <span>Internetowa</span></a>
	</div>
</div>

#header
{
	position: relative;
	left: 15px;
	margin-bottom: 30px;
	margin-left: 105px;
	margin-top: 30px;
	width: 600px;
	background-color: #000000;
}

#header .text
{
	background: -webkit-linear-gradient(#eee, #333);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 42px;
	text-decoration: none;
}

#header .text span
{
	background: -webkit-linear-gradient(#333, #eee);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 42px;
	text-decoration: none;
}

 

Answer 2

Gradient jest jakby zamiennikiem background-image, a nie background-color. Również do koloru tekstu nie da się jego stosować. Jeśli chcesz zrobić sobie tekst z gradientem to najlepiej użyć svg.