グラデーション文字のCSSジェネレーター
グラデーションテキスト用のCSSを生成します。background-clip: text（-webkit-プレフィックス付き）で文字の形にクリップした線形または放射状グラデーションと、透明な文字色を使います。完成したクラスやインラインのスニペットをコピーできます。
入力
プレビューとHTMLスニペットに表示されます。CSSクラスはこのテキストに関係なく同じです。
線形グラデーションの方向。
出力
ここにグラデーションテキストが表示されます。
これをスタイルシートに追加し、要素に class="gradient-text" を指定してください。
インラインスタイルの span 要素です。スタイルシートなしでどこにでも貼り付けられます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/gradient-text-css-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"sampleText": "Gradient Text",
"fontSize": "72",
"fontWeight": "700",
"gradientType": "linear",
"angle": "90",
"color1": "#464aff",
"position1": "0",
"color2": "#ff6b9d",
"position2": "100",
"useColor3": "",
"color3": "#ffd93d",
"position3": "50"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `gradient-text-css-generator` tool (Gradient Text CSS Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/gradient-text-css-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="グラデーション文字のCSSジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
グラデーションテキストは、単色の塗りつぶしではなく、文字そのものに色のグラデーションを描くことで、ありふれた見出しを目を引くタイポグラフィに変えます。このグラデーション文字のCSSジェネレーターは、正確なCSSを作成します。色、方向、サイズ、太さを選び、ライブプレビューの変化を確認してから、完成したクラスまたは自己完結型のインラインスニペットをコピーできます。
グラデーションテキストの仕組み
この効果は、いくつかのCSSプロパティの巧みな組み合わせによって実現します。要素のbackground-imageとしてグラデーションを設定し、background-clip: textで背景を文字の形にクリップしてから、テキストの塗りつぶしを透明にして、グラデーションが透けて見えるようにします。
.gradient-text {
background-image: linear-gradient(90deg, #464aff 0%, #ff6b9d 100%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
}-webkit-background-clipと-webkit-text-fill-colorの行は、幅広いブラウザでの対応を支える重要な部分です。Chrome、Safari、その他のWebKit/Blinkベースのブラウザではベンダープレフィックス付きの指定が必要で、このジェネレーターは常にそれらを含めるため、テキストがどの環境でも正しく表示されます。
ジェネレーターの使い方
- 入力テキストを入力して、ライブプレビューで確認します。
- グラデーションの種類を選びます。直線的に文字を横切る線形、または中心から広がる放射状を選べます。
- 角度を設定します（線形グラデーションの場合）。
0deg（下から上）から90deg（左から右）までの間で、グラデーションの方向を調整できます。 - **色の中止点を追加します。**既定では2色が有効です。より豊かな多色のブレンドにするには「3番目の色の中止点を追加」にチェックを入れます。各中止点の位置は0%から100%の範囲で指定します。
- フォントのサイズと太さを調整します。スタイルを適用する見出しに合わせます。
このツールは2つの出力を生成します。スタイルシートに追加できる.gradient-textのCSSクラスと、スタイルをインラインで埋め込んだ自己完結型のHTMLのspan要素です。メールテンプレート、CMSのブロック、スタイルシートを追加できない場所で役立ちます。
グラデーションテキストが切れて見えるのはなぜですか？
背景がテキストに合わせてクリップされるため、クリップが正しいサイズになるには要素にdisplay: inline-block（またはblock）が必要です。このジェネレーターは自動的にそれを追加します。文字の下向きのはみ出し部分（ディセンダー）が切れる場合は、要素に少しのline-heightまたはpaddingを追加してください。
グラデーションテキストはアクセシブルですか？
グラデーションはコントラストを下げることがあります。そのため、ブレンド内で最も暗い色が背景に対して読みやすいことを確認し、本文ではなく大きな見出しにこの効果を使うようにしてください。スクリーンリーダーは基になるテキストを通常どおり読み上げるため、意味的な欠点はありません。
テキストがどこかに送信されますか？
いいえ。CSSはすべてお使いのブラウザ内で生成されます。何もアップロードされず、ページの読み込み後はオフラインでも動作します。