Как сделать так, чтобы тень не налазила на буквы?

Question

[SuperZombi]

Проблема:
Тень на сайте налазит сверху на градиентный текст. Как сделать так, чтобы тень не налазила?

.font1{
	font: bold 24pt Bips;
	background: linear-gradient(to right, #07f, #7109AA);

	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;

	text-shadow: grey 4px 5px 2px;
	-webkit-text-stroke: 1px black;
}

Картинка 1 - Как у меня получилось

Картинка 2 - Как я хочу, чтобы было (Photoshop)

Answer 1

[Ivan Bogachev]

Можно заменить тень на фильтр:



Но такие штуки не отличаются хорошей кроссбраузерностью, а светлое будущее наступило еще не везде, так что в общем случае я бы рекомендовал использовать SVG-картинки.

Answer 2

[Григорий Моргачев]

Вот решение вашего вопроса: