渐变文字颜色
Gradient text color
是否有一个生成器,或者一种简单的方法来生成像 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 颜色而是用其他颜色生成(例如白色到 grey/light 蓝色渐变等)我找不到一个简单的解决方案。有什么解决办法吗?
您可以使用 CSS linear-gradient and 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
值即可实现您想要的。
我不太清楚 stop 的工作原理。
但是我有一个 gradient text 的例子。也许这会对您有所帮助!
_如果需要,您还可以向渐变中添加更多颜色,或者只是 color generator
中的 select 其他颜色
.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>
这种效果的工作方式非常简单。该元素被赋予一个渐变背景。它从一种颜色变为另一种颜色,具体取决于为其指定的颜色和色标百分比。
例如,在彩虹文本示例中(请注意,我已将渐变转换为标准语法):
- 渐变从颜色
#f22
处的 0%
开始(即元素的左边缘)。尽管未明确提及百分比,但始终假定第一种颜色从 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>
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
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>
.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>
@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>
是否有一个生成器,或者一种简单的方法来生成像 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 颜色而是用其他颜色生成(例如白色到 grey/light 蓝色渐变等)我找不到一个简单的解决方案。有什么解决办法吗?
您可以使用 CSS linear-gradient and 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
值即可实现您想要的。
我不太清楚 stop 的工作原理。 但是我有一个 gradient text 的例子。也许这会对您有所帮助!
_如果需要,您还可以向渐变中添加更多颜色,或者只是 color generator
中的 select 其他颜色.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>
这种效果的工作方式非常简单。该元素被赋予一个渐变背景。它从一种颜色变为另一种颜色,具体取决于为其指定的颜色和色标百分比。
例如,在彩虹文本示例中(请注意,我已将渐变转换为标准语法):
- 渐变从颜色
#f22
处的0%
开始(即元素的左边缘)。尽管未明确提及百分比,但始终假定第一种颜色从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>
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
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>
.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>
@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>