Кросс-браузер CSS 3 текстовый градиент

На моем веб-сайте я использую текстовый градиент для заголовка, но он работает только на Chrome и, вероятно, на Safari (хотя я его не тестировал), ниже приведен код, который я использую для градиента. Мне было интересно, есть ли способ достичь того же/подобного эффекта, который будет работать во всех трех браузерах?

      background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

РЕДАКТИРОВАТЬ: Проблема с другим опубликованным решением заключается в том, что он работает только на белом фоне, как кто-то сказал в комментариях, что не подходит для меня, поскольку я использую серый фон.

Ответ 1

Если вы хотите, чтобы это работало в браузерах, отличных от WebKit, вам нужно использовать другое решение, кроме CSS.

Есть некоторые варианты JavaScript, или вы можете использовать SVG.

Вот хорошее сообщение в блоге о том, как это сделать: http://lea.verou.me/2012/05/text-masking-the-standards-way/

Использование JavaScript имеет недостаток... с использованием JavaScript, но в конце дня это только декоративный визуальный эффект.

Ответ 2

-moz-background-clip: текст не работает на firefox, и вы не сможете добиться эффекта отсечения в Firefox.

Вы можете использовать cufon для текстовых градиентов, а thay будет работать на IE, Chrome и Firefox