グラデーションテキストの色

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>

しかし、虹ではありません色ですが、他の色で生成します（例：白から灰色/薄青色g私はこのための簡単な解決策を見つけることができません。どんな解決策ですか？

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 { 
    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擬似要素に対して線形グラデーションを追加し、それが全体の段落要素をカバー作りである

<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。しかし、mix-blend-mode: screenでは、グラデーションはテキストのある部分にのみ表示されます。

ここにはjsfiddleが掲載されています。 linear-gradientの値を変更して、必要なものを達成してください。

Answer 3

から他の色を選択した場合、この効果が機能する方法は非常に簡単でグラデーションに多くの色を追加することができます。要素にグラデーションである背景が与えられます。それは、色とそれに与えられたカラー停止率に応じて、ある色から別の色に変化します。

例えば、虹のテキストサンプルに（私は標準の構文に勾配を変換したことに注意）：

• を勾配0%で色#f22から始まる（即ち、要素の左端です） 。パーセンテージが明示的に言及されていないにもかかわらず、最初の色は常に0%で始まるとみなされます。
• 0%から14.25%の間では、#f22から#f2fに徐々に変化します。 percenatgeは14.25に設定されています。これは7つの色が変更されており、均等分割を探しているためです。
• （コンテナのサイズの）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を設定して行います。テキストは、単純な3色のグラデーションを持つようにしたい場合は

は（。background-clip: textが実験的財産であり、広くサポートされていないことを注）

---

は今（つまり、赤から言います - オレンジ - ブラウン）、次のように線形勾配指定を変更するだけで済みます。

• 最初のパラメータはグラデーションの方向です。左の色が赤、右の色が茶色の場合は、方向をto rightとします。右に赤、左に茶色がある場合は、方向をto leftとします。
• 次のステップでは、グラデーションの色を定義します。グラデーションは左側に赤で始まるので、最初の色としてredと指定してください（パーセンテージは0％とみなされます）。
• ここでは、2つの色の変更（赤 - オレンジとオレンジ - ブラウン）があるため、均等分割の割合を100/2に設定する必要があります。均等分割が必要ない場合は、希望通りにパーセンテージを割り当てることができます。
• だから50%の色はorangeである必要があり、最終的な色はbrownとなります。最終的な色の位置は、常に100％であると仮定されます。

このようにグラデーションの仕様は次のように読んでください：

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

我々は、上記の方法を使用して勾配を形成し、要素に適用した場合、我々は必要な効果を得ることができます。CSSテキストの

.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

例グラデーション

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>