Цвет градиента текста

Есть ли генератор, или простой способ генерировать текст, какэтот но без необходимости определятькаждый письмо

Так что-то вроде этого:

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<span class="rainbow">Rainbow text</span>

Но не срадуга цвета, но с другими цветами (например, белый к серому / голубой градиент и т. д.) я не могу найти легкое решение для этого. Какие-либо решения?

 Mandeep Singh15 июн. 2016 г., 11:51
Есть много сайтов, которые предлагают такие же, какcssmatic.com
 StabDev15 июн. 2016 г., 12:12
Я хотел бы знать, как это работает. Поскольку данный ответ использует другой подход (который работает, но я все еще люблю знать) @Harry
 StabDev15 июн. 2016 г., 11:54
Это относится только кфон не сам цвет текста: |
 Angel ofDemons15 июн. 2016 г., 12:14
Я хотел бы видеть это также @ Гарри
 Harry15 июн. 2016 г., 11:53
В чем проблема? Измените градиент, как вы хотите. Если вы спрашиваете об инструментах / генераторах (которые, я думаю, вы), тогда ваш вопрос будет закрыт как не основанный на теме / мнении.
 Harry15 июн. 2016 г., 12:10
@StabDev: я вижу, вы уже приняли ответ. Вы все еще хотите знатькак это устроено? Если да, я дам подробный ответ.
 StabDev15 июн. 2016 г., 11:54
Я пытаюсь узнать, как получить тот же эффект, что итекст радуги образец, но с другими цветами @ Гарри не просит генераторакак таковой решение о том, как просто установить цвета самостоятельно / какрадуга Примеры работ также могут помочь.

Ответы на вопрос(6)

h1 {
  font-size: 72px;
  background: linear-gradient(to right, #cb2d3e 0%, #ef473a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 Bodo Thiesen12 мар. 2019 г., 18:44
Принятый ответ тоже ничего не объясняет. Так зачем этот?
 Julix02 апр. 2019 г., 07:26
Потому что принятый ответ показывает, что он работает (то есть «запустить фрагмент»)
 Manthan Patel29 мая 2019 г., 14:01
Извините за ранее поставленный необъяснимый код. но теперь я поставил фрагмент для предварительного просмотра моего кода.
 halfpastfour.am12 мар. 2019 г., 13:50
Пожалуйста, предоставьте некоторое объяснение или описание того, почему это будет решением.

Пример CSS текстового градиента

background-image: -moz-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -webkit-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -o-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: -ms-linear-gradient(top,#E605C1 0%,#3B113B 100%);
background-image: linear-gradient(top,#E605C1 0%,#3B113B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
display:inline-block; /*required*/

Онлайн генератор textgradient.com

 Shashank Agrawal13 апр. 2018 г., 06:36
Мне не хваталоdisplay, Спасибо
Решение Вопроса

стоп все работает. Но у меня естьградиентный текст пример. Может быть, это поможет вам!

_Вы также можете добавить больше цветов к градиенту или просто выбрать другие цвета изгенератор цветов

.rainbow2 {
    background-image: -webkit-linear-gradient(left, #E0F8F7, #585858, #fff); /* For Chrome and Safari */
    background-image:    -moz-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Fx (3.6 to 15) */
    background-image:     -ms-linear-gradient(left, #E0F8F7, #585858, #fff); /* For pre-releases of IE 10*/
    background-image:      -o-linear-gradient(left, #E0F8F7, #585858, #fff); /* For old Opera (11.1 to 12.0) */
    background-image:         linear-gradient(to right, #E0F8F7, #585858, #fff); /* Standard syntax; must be last */
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.rainbow {

  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<span class="rainbow">Rainbow text</span>
<br />
<span class="rainbow2">No rainbow text</span>

 StabDev15 июн. 2016 г., 12:11
Простое приятное решение! Спасибо
 user260258429 дек. 2017 г., 13:55
но -webkit-background-clip: текст; свойство не поддерживается в IE11, любая альтернатива?
 Arnelle Balane15 июн. 2016 г., 12:22
ну, это умный способ достижения этого! хорошая работа! : D

Вы можете добиться этого эффекта, используя комбинацию CSSлинейный градиент а такжемикс-смесь-режим.

HTML

<p>
    Enter your message here... 
    To be or not to be, 
    that is the question...
    maybe, I think, 
    I'm not sure
    wait, you're still reading this?
    Type a good message already!
</p>

CSS

p {
    width: 300px;
    position: relative;
}

p::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, purple);
    mix-blend-mode: screen;
}

Что это делает, это добавить линейный градиент на абзаце::after псевдоэлемент и сделать так, чтобы он охватывал весь элемент абзаца. Но сmix-blend-mode: screenградиент будет отображаться только в тех местах, где есть текст.

Вотjsfiddle чтобы показать это на работе. Просто изменитеlinear-gradient ценности для достижения того, что вы хотите.

 Angel ofDemons15 июн. 2016 г., 12:16
Это не отстой, я люблю подход, его легко и полезно. Я пытался использовать этоэтот путь.
 Doctor.Who.09 июн. 2017 г., 08:02
Это не работает на Chrome58
 Arnelle Balane15 июн. 2016 г., 12:13
@AngelofDemons о, я предполагал, что фон будет просто белым.mix-blend-mode смешивает элемент со всеми остальными элементами позади него, а не только с текстом, поэтому, если у абзаца также есть фон, цвета радуги также будут смешиваться с ними. Я знаю, это отстой :(
 Angel ofDemons15 июн. 2016 г., 12:08
Это выглядит многообещающе. Кроме фонапозади текст также исчезает вместе с ним. Помимо этого простого и приятного решения! +1

body{ background:#3F5261; text-align:center; font-family:Arial; } 

h1 {
  font-size:3em;
  background: -webkit-linear-gradient(top, gold, white);
  background: linear-gradient(top, gold, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  position:relative;
  margin:0;
  z-index:1;

}

div{ display:inline-block; position:relative; }
div::before{ 
   content:attr(data-title); 
   font-size:3em;
   font-weight:bold;
   position:absolute;
   top:0; left:0;
   z-index:-1;
   color:black;
   z-index:1;
   filter:blur(5px);
} 
<div data-title='SOME TITLE'>
  <h1>SOME TITLE</h1>
</div>

Этот эффект работает очень просто. Элемент получает фон, который является градиентом. Он переходит от одного цвета к другому в зависимости от цветов и процентных долей цветности, указанных для него.

Например, в образце текста радуги (обратите внимание, что я преобразовал градиент в стандартный синтаксис):

Градиент начинается с цвета#f22 в0% (это левый край элемента). Первый цвет всегда начинается с0% хотя процент не упоминается явно.Между0% в14.25%, цвет меняется от#f22 в#f2f постепенно. Проценты установлены на14.25 потому что есть семь смен цвета, и мы ищем равные расколы.В14.25% (размера контейнера), цвет будет точно#f2f согласно указанному градиенту.Точно так же цвета меняются от одного к другому в зависимости от полос, определенных процентами остановки цвета. Каждая группа должна быть шагом14.25%.

Итак, мы получаем градиент, как в приведенном ниже фрагменте. Теперь одно это будет означать, что фон применяется ко всему элементу, а не только к тексту.

.rainbow {
  background-image: linear-gradient(to right, #f22, #f2f 14.25%, #22f 28.5%, #2ff 42.75%, #2f2 57%, #2f2 71.25%, #ff2 85.5%, #f22);
  color: transparent;
}
<span class="rainbow">Rainbow text</span>

Так как градиент должен применяться только к тексту, а не к элементу в целом, мы должны дать браузеру указание вырезать фон из областей за пределами текста. Это делается настройкойbackground-clip: text.

(Обратите внимание, чтоbackground-clip: text является экспериментальным свойством и не поддерживается широко.)

Теперь, если вы хотите, чтобы текст имел простой трехцветный градиент (то есть, скажем, из красного - оранжевого - коричневого), нам просто нужно изменить спецификацию линейного градиента следующим образом:

Первый параметр - это направление градиента. Если цвет должен быть красным с левой стороны и коричневым с правой стороны, используйте направление какto right, Если он должен быть красным справа и коричневым слева, укажите направление какto left.Следующий шаг - определить цвета градиента. Поскольку наш градиент должен начинаться с красного на левой стороне, просто укажитеred в качестве первого цвета (предполагается, что процент равен 0%).Теперь, поскольку у нас есть два изменения цвета (красный - оранжевый и оранжевый - коричневый), проценты должны быть установлены равными 100/2 для равных расщеплений. Если равные разделения не требуются, мы можем назначить проценты, как мы желаем.Так что в50% цвет должен бытьorange и тогда окончательный цвет будетbrown, Положение окончательного цвета всегда принимается за 100%.

Таким образом, спецификация градиента должна выглядеть следующим образом:

background-image: linear-gradient(to right, red, orange 50%, brown).

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

.red-orange-brown {
  background-image: linear-gradient(to right, red, orange 50%, brown);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.green-yellowgreen-yellow-gold {
  background-image: linear-gradient(to right, green, yellowgreen 33%, yellow 66%, gold);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<span class="red-orange-brown">Red to Orange to Brown</span>

<br>

<span class="green-yellowgreen-yellow-gold">Green to Yellow-green to Yellow to Gold</span>

Ваш ответ на вопрос