CSSグラデーションテキスト
テキストにCSSグラデーションを適用するコードを生成。 色・方向・範囲をリアルタイムにプレビューしながら調整できる。
Gradient Text
0%
100%
.gradient-text {
background: linear-gradient(to right, #ec4899 0%, #8b5cf6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 48px;
font-weight: 700;
}このツールをシェア
📖
使い方
Step 1
テキスト入力
グラデーションを適用したいテキストを入力
→
Step 2
グラデーション設定
色・方向・タイプなどのグラデーション設定を調整
→
Step 3
CSSコピー
生成されたCSSコードをコピー
✨
このツールの特徴
リアルタイムプレビュー
テキストへのグラデーション適用をリアルタイムでプレビュー
多彩なグラデーション
リニア・ラジアル・コニック、複数カラーストップに対応
プリセット付き
人気のグラデーションプリセットからワンクリックで適用
❓
よくある質問
background-clip: textプロパティを使って、テキストにグラデーション背景を適用するCSS技法です。
🔗関連ツール
🎨
デザインカラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
🎨
デザインカラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
🎨
デザイン画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
🎯
デザイン画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
🌈
デザインCSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
🔲
デザインCSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。