CSS 渐变文字颜色

Question

提问by StabDev

Is there a generator , or an easy way to generate text like thisbut without having to define everyletter

是否有一个发电机，或者一个简单的方法来生成诸如文本这样，但不必定义每一封信

So something like 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>

But not with rainbowcolors but generate with other colors (for example white to grey/light blue gradient etc) I can't find an easy solution for this. Any solutions?

但不是用彩虹色而是用其他颜色生成（例如白色到灰色/浅蓝色渐变等）我找不到一个简单的解决方案。任何解决方案？

Answer 1

回答by Angel ofDemons

I don't exactly know how the stopstuff works. But I've got a gradient textexample. Maybe this will help you out!

我不完全知道停止的东西是如何工作的。但是我有一个渐变文本示例。也许这会帮助你！

_you can also add more colors to the gradient if you want or just select other colors from the 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

回答by Harry

The way this effect works is very simple. The element is given a background which is the gradient. It goes from one color to another depending on the colors and color-stop percentages given for it.

这种效果的工作方式非常简单。该元素被赋予一个背景，即渐变。它从一种颜色变为另一种颜色，具体取决于为其提供的颜色和色标百分比。

For example, in rainbow text sample (note that I've converted the gradient into the standard syntax):

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

The gradient starts at color #f22at 0%(that is the left edge of the element). First color is always assumed to start at 0%even though the percentage is not mentioned explicitly.
Between 0%to 14.25%, the color changes from #f22to #f2fgradually. The percenatge is set at 14.25because there are seven color changes and we are looking for equal splits.
At 14.25%(of the container's size), the color will exactly be #f2fas per the gradient specified.
Similarly the colors change from one to another depending on the bands specified by color stop percentages. Each band should be a step of 14.25%.

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

So, we end up getting a gradient like in the below snippet. Now this alone would mean the background applies to the entire element and not just the text.

所以，我们最终得到了如下片段所示的渐变。现在仅此一项就意味着背景适用于整个元素而不仅仅是文本。

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

Since, the gradient needs to be applied only to the text and not to the element on the whole, we need to instruct the browser to clip the background from the areas outside the text. This is done by setting background-clip: text.

由于渐变只需要应用于文本而不是整个元素，我们需要指示浏览器从文本外部的区域剪下背景。这是通过设置完成的background-clip: text。

(Note that the background-clip: textis an experimental property and is not supported widely.)

（请注意，这background-clip: text是一个实验属性，并没有得到广泛支持。）

Now if you want the text to have a simple 3 color gradient (that is, say from red - orange - brown), we just need to change the linear-gradient specification as follows:

现在，如果您希望文本具有简单的 3 色渐变（即从红色 - 橙色 - 棕色），我们只需要按如下方式更改线性渐变规范：

First parameter is the direction of the gradient. If the color should be red at left side and brown at the right side then use the direction as to right. If it should be red at right and brown at left then give the direction as to left.
Next step is to define the colors of the gradient. Since our gradient should start as red on the left side, just specify redas the first color (percentage is assumed to be 0%).
Now, since we have two color changes (red - orange and orange - brown), the percentages must be set as 100 / 2 for equal splits. If equal splits are not required, we can assign the percentages as we wish.
So at 50%the color should be orangeand then the final color would be brown. The position of the final color is always assumed to be at 100%.

第一个参数是梯度的方向。如果颜色应该在左侧为红色，右侧为棕色，则使用方向为to right。如果它应该在右边是红色，左边是棕色，那么给出方向to left。
下一步是定义渐变的颜色。由于我们的渐变应该从左侧开始为红色，因此只需指定red第一种颜色（假设百分比为 0%）。
现在，由于我们有两种颜色变化（红色 - 橙色和橙色 - 棕色），因此必须将百分比设置为 100 / 2 以实现相等的拆分。如果不需要等分，我们可以根据需要分配百分比。
所以在50%颜色应该是orange然后最终的颜色会是brown。最终颜色的位置始终假定为 100%。

Thus the gradient's specification should read as follows:

因此，梯度的规范应如下所示：

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

If we form the gradients using the above mentioned method and apply them to the element, we can get the required effect.

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

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

回答by Arnelle Balane

You can achieve that effect using a combination of CSS linear-gradientand mix-blend-mode.

您可以使用 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;
}

What this does is add a linear gradient on the paragraph's ::afterpseudo-element and make it cover the whole paragraph element. But with mix-blend-mode: screen, the gradient will only show on parts where there is text.

这样做是在段落的::after伪元素上添加线性渐变并使其覆盖整个段落元素。但是使用mix-blend-mode: screen，渐变只会显示在有文本的部分。

Here's a jsfiddleto show this at work. Just modify the linear-gradientvalues to achieve what you want.

这是一个jsfiddle，可以在工作中展示这一点。只需修改linear-gradient值即可达到您想要的效果。

Answer 4

回答by Francesc

Example of CSS Text Gradient

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

Online generatortextgradient.com

在线生成器textgradient.com

Answer 5

回答by vsync

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>

Answer 6

回答by Manthan Patel

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

Answer 7

回答by vamshi mannem

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

回答by Maheshvirus

If anybody looking for only text gradient.here we go..

如果有人只寻找文本渐变。开始了..

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

CSS 渐变文字颜色

提问by StabDev

回答by Angel ofDemons

回答by Harry

回答by Arnelle Balane

回答by Francesc

回答by vsync

回答by Manthan Patel

回答by vamshi mannem

回答by Maheshvirus

相关推荐

最近更新

标签

CSS 渐变文字颜色

提问by StabDev

回答by Angel ofDemons

回答by Harry

回答by Arnelle Balane

回答by Francesc

回答by vsync

回答by Manthan Patel

回答by vamshi mannem

回答by Maheshvirus

相关推荐

CSS 如何将 div 高度设置为所选打印纸的 100%？

CSS 固定位置不起作用像绝对一样工作

带有箭头和边框的 CSS 工具提示

如何使用 CSS 在悬停时向图像添加工具提示

相关推荐

最近更新

标签