CSSテキストカラーグラデーションを実装する3つの方法（コード付き）
この記事では、CSS テキストの色のグラデーションの 3 つの実装方法 (コード付き) を紹介します。必要な方は参考にしていただければ幸いです。
Web フロントエンド開発の過程で、UI デザイナーはグラデーション テキストを含むデザイン図面をデザインすることがよくありますが、以前はテキストを置き換えるには PNG 画像しか使用できませんでした。現在では、純粋な CSS を使用して実現できます。グラデーションテキスト。 3つの実装方法をご紹介しますので、ぜひ参考にしてください！
基本スタイル:
.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
最初の方法、background-cli、text-fill-color を使用:
.gradient-text-one{
background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
手順:
background: - webkit -linear-gradient(...) は、テキスト要素にグラデーションの背景を提供します。
webkit-text-fill-color: 透明 テキストを透明色で塗りつぶします。
webkit-background-clip: text 背景をテキストでクリップし、テキストをグラデーションの背景で色で塗りつぶします。
2 番目の方法は、mask-image を使用することです:
.gradient-text-two{
color:red;
}
.gradient-text-two[data-content]::after{
content:attr(data-content);
display: block;
position:absolute;
color:yellow;
left:0;
top:0;
z-index:2;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}
手順:
mask-image は、値が image であるだけでなく、background-image と同じです。パスだけでなく、グラデーションカラーでもあります。
3 番目の方法は、linearGradient を使用し、塗りつぶします:
.gradient-text-three{
fill:url(#SVGID_1_);
font-size:40px;
font-weight:bolder;
}
<svg viewBoxs="0 0 500 300" class="svgBox"> <defs> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50"> <stop offset="0" style="stop-color:yellow"/> <stop offset="0.5" style="stop-color:#fd8403"/> <stop offset="1" style="stop-color:red"/> </linearGradient> </defs> <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text> </svg>
説明:
SVG には、主に 2 つのグラデーション タイプがあります:
Linear Gradient (linearGradient )
放射状グラデーション (radialGradient)
SVG のグラデーションは、グラフィック要素を塗りつぶすだけでなく、テキスト要素を塗りつぶすためにも使用できます
dom example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>CSS3渐变字体</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body,html{width:100%;height:100%;}
.wrapper{width:80%;margin:0 auto;margin-top:30px;}
.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
.gradient-text-one{
background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.gradient-text-two{
color:red;
}
.gradient-text-two[data-content]::after{
content:attr(data-content);
display: block;
position:absolute;
color:yellow;
left:0;
top:0;
z-index:2;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}
.gradient-text-three{
fill:url(#SVGID_1_);
font-size:40px;
font-weight:bolder;
}
</style>
</head>
<body>
<section class="wrapper">
<p class="panel panel-info">
<p class="panel-heading">
<h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
</p>
<p class="panel-body">
<h3 class="gradient-text gradient-text-one">花样年华</h3>
</p>
</p>
<p class="panel panel-warning">
<p class="panel-heading">
<h3 class="panel-title">方法2. mask-image</h3>
</p>
<p class="panel-body">
<h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
</p>
</p>
<p class="panel panel-danger">
<p class="panel-heading">
<h3 class="panel-title">方法3. svg linearGradient</h3>
</p>
<p class="panel-body">
<svg viewBoxs="0 0 500 300" class="svgBox">
<defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
<stop offset="0" style="stop-color:yellow"/>
<stop offset="0.5" style="stop-color:#fd8403"/>
<stop offset="1" style="stop-color:red"/>
</linearGradient>
</defs>
<text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
</svg>
</p>
</p>
</section>
</body>
</html>
以上がCSSテキストカラーグラデーションを実装する3つの方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
CSSアスペクト比プロパティとの使用方法は何ですか？
Aug 04, 2025 pm 04:38 PM
Theaspect-ratioCSSpropertydefinesthewidth-to-heightratioofanelement,ensuringconsistentproportionsinresponsivedesigns.1.Itisapplieddirectlytoelementslikeimages,videos,orcontainersusingsyntaxsuchasaspect-ratio:16/9.2.Commonusecasesincludemaintainingres
仮想通貨取引アプリとは何ですか？_ 2025年にトップ10の推奨公式仮想通貨取引アプリ
Aug 08, 2025 pm 06:42 PM
1. Binanceは、膨大なトランザクションボリュームと豊富な取引ペアで知られています。多様な取引モデルと完璧なエコシステムを提供します。また、SAFUファンドと複数のセキュリティテクノロジーを通じてユーザー資産のセキュリティを保証し、準拠した運用を非常に重要にします。 2。OKXOUYIは、幅広いデジタル資産取引サービスと統一された取引アカウントモデルを提供し、Web3フィールドを積極的に展開し、厳格なリスク管理とユーザー教育を通じてトランザクションセキュリティと経験を改善します。 3。GATE.IOセサミはドアを開き、通貨速度と豊富な通貨を備え、多様な取引ツールと付加価値サービスを提供し、複数のセキュリティ検証メカニズムを採用し、ユーザーの信頼を強化するための資産準備を遵守します。 4。Huobiは、深い業界の蓄積を備えたワンストップのデジタル資産サービスを提供し、強いトランザクションの深さと
CSSの使用方法：空の擬似クラス？
Aug 05, 2025 am 09:48 AM
The：emptypseudo-classselecteselementswithnochildrenorcontent、includingspacesorcomments、aonterlytrulyelementslikematchit;
CSSのみのアコーディオンメニューを作成する方法は？
Aug 03, 2025 pm 01:48 PM
非表示のチェックボックスとCSSを使用してください。隣接する兄弟セレクター（）と組み合わせたチェックされた擬似クラス（）を制御するコンテンツディスプレイ。 2. HTML構造には、崩壊したアイテムごとに入力、ラベル、コンテンツDIVが含まれています。 3.最大高さの遷移を設定することにより、スムーズな拡張/崩壊アニメーション。 4.擬似要素を使用してオープン/クローズステータスアイコンを追加します。 5.無線タイプを使用してシングルオープンモードを実装しますが、チェックボックスを使用すると複数の開口部が可能になります。これは、JavaScriptを必要とせず、最新のブラウザーと互換性のあるインタラクティブな折りたたみ式メニューの実装です。
クリエイティブな形状にCSSクリップパスを使用する方法は？
Aug 04, 2025 pm 02:55 PM
CSSCLIP-PATHを使用して、追加の画像や複雑なSVGなしでブラウザに非長方形の形状を作成します。 2。一般的な形状関数には、INSET（）、Circle（）、Ellipse（）、Polygon（）が含まれます。ここで、ポリゴン（）は、ダイアログバブルなどの創造的なデザインを作成するのに適した座標ポイントを定義することでカスタムシェイプを実装します。 3.クリップパスは、ホバリング中のサークル拡張など、CSS遷移またはキーフレームアニメーションを通じて動的効果を達成できますが、同じタイプの間隔アニメーションと頂点の数のみをサポートします。 4.応答性とアクセシビリティに注意して、サポートされていないときにコンテンツがまだ利用可能であることを確認し、テキストが読み取り可能であり、過度の収穫を避け、ポリゴン頂点の数を制御してパフォーマンスを最適化します。同時に、それを知る必要があります
CSSでVWおよびVHユニットの使用方法
Aug 07, 2025 pm 11:44 PM
VWおよびVHユニットは、要素サイズをビューポートの幅と高さに関連付けることにより、レスポンシブな設計を実現します。 1VWはビューポート幅の1％に等しく、1VHはビューポートの高さの1％に等しくなります。フルスクリーン領域、レスポンシブフォント、弾性間隔で一般的に使用されています。 1.フルスクリーン領域で100VH以下100dVHを使用して、モバイルブラウザーアドレスバーの影響を避けます。 2。レスポンシブフォントは、5VWで制限され、クランプ（1.5REM、3VW、3REM）と組み合わせて、最小サイズと最大サイズを制限できます。 3。幅などの弾性間隔：80VW、マージン：5VHAUTO、パディング：2VH3VW、レイアウトを適応可能にすることができます。モバイルデバイスの互換性、アクセシビリティ、固定幅コンテンツの競合に注意してください。最初にDVHを使用することを優先することをお勧めします。
CSSでフィルタープロパティを使用する方法
Aug 11, 2025 pm 05:29 PM
thecsSsfilterpropertyallowsvisualefectslikeblur、輝度、およびグレイソベアプリドディレクトリトリトムレメント。1）usethesyntaxfilter：usethesyntaxfilter：filter-function（value）toapplyeffects.2）combinemultiplefilterswithspareation、blur（2）
CSSで垂直線を作成する方法
Aug 11, 2025 pm 12:49 PM
境界線のあるDivを使用して、垂直線をすばやく作成し、ボーダー左と高さを設定してスタイルと高さを定義します。 2。使用::前の::擬似要素の後、装飾的な分離に適した追加のHTMLタグなしで垂直線を追加する。 3.フレックスボックスレイアウトでは、仕切りクラスの幅と背景色を設定することにより、弾性容器間の適応垂直分割器を実現できます。 4。CSSGRIDでは、垂直線を独立した列（自動化合列など）としてグリッドレイアウトに挿入します。これは、レスポンシブデザインに適しています。最も適切な方法は、構造がシンプルでメンテナンスが簡単であることを確認するために、特定のレイアウトの必要性に従って選択する必要があります。
