美しいCSSテキストグラデーションを簡単に作成
あなたのウェブサイトのための見事なグラデーションテキスト効果を作成する
グラデーションコントロール
.gradient-text { background: linear-gradient(to right, #4F46E5, #EC4899); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
人気のグラデーション
使用方法
テキストを入力してください
グラデーションを適用するテキストを「テキスト」入力フィールドに入力します。
グラデーションタイプを選択
線形、放射状、または円錐形のグラデーション タイプから選択します。
方向または角度の調整
線形グラデーションの場合は、方向を選択します。円錐曲線の場合は、角度を設定します。
色のカスタマイズ
カラーストップとその位置を追加、削除、または調整して、目的のグラデーションを作成します。
CSSをコピーまたは保存
生成された CSS コードをコピーするか、プロジェクトで使用する CSS ファイルとして保存します。
テキストグラデーションについて
CSS テキストグラデーションを使用すると、美しいマルチカラーのグラデーションをテキストに直接適用できます。この効果はかつては画像でしか実現できませんでしたが、最新のCSSはそれをシンプルで効率的にします。
ブラウザのサポート:テキストのグラデーションは、Chrome、Firefox、Safari、Edge など、最新のすべてのブラウザーでサポートされています。Internet Explorer などの古いブラウザーでは、テキストは単色にフォールバックします。
使用上のヒント:テキストのグラデーションは、太字のテキストとコントラストの高い色の組み合わせに最適です。さまざまなグラデーションの種類と方向を試して、目的の効果を実現します。
Related Tools
CSS3変換を簡単に生成
コードを書かずに複雑なCSS3変換を作成するための強力で直感的なツール。変更をリアルタイムで視覚化し、生成された CSS をコピーしてプロジェクトで使用します。
完璧なフレックスボックスレイアウトを作成
CSS フレックスボックス コードを視覚化、カスタマイズ、生成するには、直感的なドラッグ アンド ドロップ インターフェイスを使用します。
スタイラスからCSSへのコンバーター
SCSS コードを CSS に変換します。高速、簡単、安全。
速度単位コンバータ
さまざまな速度単位を、エンジニアリング、科学、および日常のニーズに合わせて正確に変換します
テキストから改行を削除する
使いやすいツールで複数行のテキストを1つの連続した行に変換します。
MD4ハッシュジェネレータ
MD4ハッシュを迅速かつ簡単に生成