Градиент цвета текста

Question

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

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

.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>

Но не с rainbow цвета, но с другими цветами (например, от белого до серого/голубого цвета g radient и т. д.). Я не могу найти для этого легкого решения. Любые решения?

Answer 1

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

_you может добавить больше цветов градиента, если вы хотите или просто выбрать другие цвета из color generator

.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>

Answer 2

Вы можете достичь этого эффекта, используя комбинацию CSS linear-gradient и mix-blend-mode.

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, чтобы достичь желаемого.

Answer 3

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

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

• градиент начинается с цвета #f22 на 0% (то есть левый край элемента) , Первый цвет всегда начинается с 0%, хотя процент явно не указан.
• От до 14.25%, цвет меняется с #f22 по #f2f постепенно. Percenatge установлен в 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 является экспериментальной собственностью и широко не поддерживается)

---

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

• Первый параметр - направление градиента. Если цвет должен быть красного цвета с левой стороны и коричневого цвета с правой стороны, используйте направление как 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>

Answer 4

Пример CSS Text Градиент

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

Answer 5

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>