美しいCSSテキストグラデーションを簡単に作成
あなたのウェブサイトのための見事なグラデーションテキスト効果を作成する
グラデーションコントロール
CSSグラデーションテキスト
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
人気のグラデーション
Sunset
linear-gradient(to right, #FF512F, #F09819)
Magic
linear-gradient(to right, #4158D0, #C850C0, #FFCC70)
Ocean
linear-gradient(to right, #0093E9, #80D0C7)
Electric
linear-gradient(to right, #30CFD0, #330867)
フルーツサラダ
linear-gradient(to right, #FA709A, #FEE140)
Neon Glow
linear-gradient(to right, #00DBDE, #FC00FF)
使用方法
1
テキストを入力してください
グラデーションを適用するテキストを「テキスト」入力フィールドに入力します。
2
グラデーションタイプを選択
線形、放射状、または円錐形のグラデーション タイプから選択します。
3
方向または角度の調整
線形グラデーションの場合は、方向を選択します。円錐曲線の場合は、角度を設定します。
4
色のカスタマイズ
カラーストップとその位置を追加、削除、または調整して、目的のグラデーションを作成します。
5
CSSをコピーまたは保存
生成された CSS コードをコピーするか、プロジェクトで使用する CSS ファイルとして保存します。
テキストグラデーションについて
CSS テキストグラデーションを使用すると、美しいマルチカラーのグラデーションをテキストに直接適用できます。この効果はかつては画像でしか実現できませんでしたが、最新のCSSはそれをシンプルで効率的にします。
ブラウザのサポート:テキストのグラデーションは、Chrome、Firefox、Safari、Edge など、最新のすべてのブラウザーでサポートされています。Internet Explorer などの古いブラウザーでは、テキストは単色にフォールバックします。
使用上のヒント:テキストのグラデーションは、太字のテキストとコントラストの高い色の組み合わせに最適です。さまざまなグラデーションの種類と方向を試して、目的の効果を実現します。