渐变文本颜色

Question

是否有类似这个的生成器，或者一种简单的方法来生成文本，而不需要定义每一个字母。

因此，类似于这样：

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

不用 彩虹色，而是使用其他颜色生成（例如从白色到灰色/浅蓝色渐变），我找不到简单的解决方案。有什么解决办法吗？

- StabDev

---

有许多网站提供类似的服务，例如http://www.cssmatic.com/。 - Mandeep Singh

那里出了什么问题？根据您的意愿更改渐变。如果您在询问有关工具/生成器（我认为是的），则您的问题将被关闭，因为它是离题的/基于个人观点的。 - Harry

这仅适用于背景，而不是文本颜色本身 :| - StabDev

我正在尝试了解如何获得与“彩虹文本”示例相同的效果，但使用其他颜色。@Harry，我不是在寻求一个生成器，而是希望得到一个简单设置颜色的解决方案，或者了解“彩虹”示例的工作原理也将是非常有帮助的。 - StabDev

我很想知道它是如何工作的。因为给出的答案使用了不同的方法（虽然有效，但我仍然想知道）。@Harry - StabDev

Answer 1

我不确定 stop 是如何工作的，但我有一个 渐变文字 的例子，也许能帮到你！

_如果需要，您还可以在渐变中添加更多颜色，或者从颜色生成器中选择其他颜色。

.rainbow2 {
  background-image: linear-gradient(to right, #E0F8F7, #585858, #fff);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.rainbow {
  background-image: linear-gradient(to right, #f22, #f2f, #22f, #2ff, #2f2, #ff2);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>
<br />
<span class="rainbow2">No rainbow text</span>

- Angel ofDemons

---

但是 -webkit-background-clip: text; 属性不支持IE11，有任何替代方法吗？ - user2602584

我似乎无法正确使用text-shadow，因为background-image的z-index始终在text-shadow下方。有什么想法吗？ - Shiz

这个程序在IE11中可以运行吗？不行。 你能加入IE11支持吗？ - user2560042

Answer 2

这种效果的工作方式非常简单。元素给定了一个渐变背景，它从一种颜色到另一种颜色，具体取决于所给出的颜色和颜色停止百分比。

例如，在下面的彩虹文本示例中（请注意我已经将渐变转换为标准语法）：

1. 渐变从颜色#f22开始于0%（即元素的左边缘）。第一种颜色始终假定在0％开始，即使没有明确指定百分比。 2. 在0％至14.25％之间，颜色逐渐从#f22变为#f2f。 因为有七个颜色变化，我们正在寻找平均分割，所以将百分比设置为14.25。 3. 在容器大小的14.25％处，颜色将完全按照指定的渐变为#f2f。 4. 类似地，颜色根据颜色停止百分比从一个颜色变为另一个颜色。每个带宽应该是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>

- Harry

Answer 3

你可以使用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的值即可实现所需效果。

- Arnelle Balane

---

这看起来很有前途。除了文字后面的背景也在一起渐变。除此之外，简单而美好的解决方案！+1 - Angel ofDemons

@AngelofDemons 哦，我假设背景只是白色。 mix-blend-mode将元素与其后面的所有其他元素混合在一起，而不仅仅是文本，因此如果段落也具有背景，则彩虹颜色也会与它们混合。 我知道，这很糟糕 :( - Arnelle Balane

它并不糟糕，我喜欢这种方法，它易于使用且有用。我尝试按照 此处 的方式使用它。 - Angel ofDemons

不受Edge（也不是IE 10/11）支持，并且在Chrome上无法正常工作（尽管它在Firefox中可以正常工作）。编辑：如果父元素p具有background-color：white;，则它可以在Chrome中工作。 - jave.web

Answer 4

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

- Francesc

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>

- vsync

Answer 6

  .gradient_text_class{
      font-size: 72px;
      background: linear-gradient(to right, #ffff00 0%, #0000FF 30%);
      background-image: linear-gradient(to right, #ffff00 0%, #0000FF 30%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

<div class="gradient_text_class">Hello</div>

- Manthan Patel

Answer 7

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400);

body {
  background: #222;
}

h1 {
  display: table;
  margin: 0 auto;
  font-family: "Roboto Slab";
  font-weight: 600;
  font-size: 7em;
  background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 200px;
}

<h1>beautiful</h1>

- vamshi mannem

---

你好，欢迎来到stackoverflow，感谢您的回答。虽然这段代码可能回答了问题，但您是否可以考虑添加一些关于您解决的问题以及如何解决它的解释呢？这将有助于未来的读者更好地理解您的答案并从中学习。 - Bruno

它能在IE11中运行吗？不行。 你能更新以支持IE11吗？ - user2560042