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 颜色，而是使用其他颜色生成（例如白色到灰色/浅蓝色渐变等）我找不到一个简单的解决方案。任何解决方案？

Answer 1

我不知道停止的工作原理。但我有一个渐变文本示例。也许这会帮助你！

_您还可以根据需要为渐变添加更多颜色，或者只选择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

此效果的工作方式非常简单。元素的背景是渐变。它根据颜色和颜色停止百分比从一种颜色变为另一种颜色。

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

渐变从#f22处的颜色0%开始（即元素的左边缘）。始终假定第一种颜色从0%开始，即使未明确提及百分比。
在0%到14.25%之间，颜色会逐渐从#f22变为#f2f。 percenatge设置为14.25，因为有七种颜色变化，我们正在寻找相等的分割。
在14.25%（容器的大小），颜色将根据指定的渐变精确为#f2f。
类似地，颜色从一个变化到另一个，具体取决于颜色停止百分比指定的波段。每个乐队应该是14.25%。

因此，我们最终获得了如下面的代码段中的渐变。现在这就意味着背景适用于整个元素，而不仅仅是文本。

＆＃13;

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

＆＃13;

<span class="rainbow">Rainbow text</span>

＆＃13;

因为渐变只需要应用于文本而不是整体上的元素，我们需要指示浏览器剪切文本外部区域的背景。这可以通过设置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).

如果我们使用上述方法形成渐变并将它们应用于元素，我们就可以获得所需的效果。

＆＃13;

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

＆＃13;

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

＆＃13;

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值即可达到您想要的效果。

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

Answer 5

＆＃13;

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);
}

＆＃13;

<div data-title='SOME TITLE'>
  <h1>SOME TITLE</h1>
</div>

＆＃13;

Answer 6

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

Answer 7

如果有人只在寻找文本渐变。 我们去了。

//HTML

<h1>Here We Go</h1>

//CSS

h1{
    background: -webkit-linear-gradient(#fff700, #1aa001);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 0px 10px rgba(255, 251, 118, 0.4);
}

渐变文字颜色

7 个答案: