CSSグラデーションテキスト生成ツール
ライブプレビューを見ながらグラデーションテキストのスタイルを作成し、CSSをコピーできます。
このツールはすべてのデータをデバイス上でローカルに処理します。
入力
グラデーション
deg
タイポグラフィ
px
出力
プレビュー
100%
CSSコード
Readme
CSSでグラデーションテキストを作る仕組み
CSSには「テキストグラデーション」プロパティはありません。一般的な方法は、要素の背景としてグラデーションを描画し、background-clip: textで背景を文字の形に切り抜き、文字の塗りつぶしを透明にしてグラデーションを透かして見せることです。
ツールの説明
テキストを入力し、開始色と終了色を選んで角度を設定すると、ツールにリアルタイムプレビューが表示され、コピーできるCSSが生成されます。フォントファミリー、太さ、サイズも変更できるため、プレビューを実際にページで使う設定に合わせられます。
生成されるルールは次のようになります。
.gradient-text {
background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}実際の出力には、フォント設定と折り返しルールも含まれます。
機能
- 0〜360度の角度を指定できる、2色の線形グラデーション
- フォントファミリー、太さ、サイズの調整
- 画像として書き出せるリアルタイムプレビューと、すぐに貼り付けて使えるCSS
コメント
ツール情報
作成日
最終更新日
タグ
cssgradienttextgeneratortext gradienttypographybackground clipcolordesignstylewebfrontend
類似ツール
入力した色をもとに、色相環で補色の周囲に均等に配置される2色以上の分裂補色を生成します。色数と広がりの角度を調整できます。
LinuxからWake on LANのマジックパケットを送信する、ネイティブのbashまたはzshコマンドを生成します。Python 3、Perl、またはbashの/dev/udpを使うため、wakeonlanやetherwakeのインストールは不要です。
写真の四隅をドラッグして3D風に傾けたり、看板、画面、壁にはめ込んだりできます。正確な遠近法の計算に対応し、元のサイズでダウンロードできます。ブラウザー上で動作します。
埋め込み
このツールを無料でどこにでも埋め込めます。ヘルプが必要ですか？ ガイドをご覧ください.
免責事項
このウェブサイトで提供されるツールは、ユーザーがさまざまな問題を解決するのを支援するために設計されています。ツールの正確性と有効性を確保するために努力していますが、いかなるツールの出力も100%正確またはエラーがないことを保証または保証しません。これらのツールによって生成される結果は現状のままで提供され、注意して使用する必要があります。重要な情報または結果については、追加のリソースまたは専門家のアドバイスで検証することをお勧めします。これらのツールの使用から生じる結果の正確性と使用に関する結果から生じるいかなる結果についても、当社は責任を負いません。このウェブサイトを使用することにより、提供される結果の正確性と使用に関連するすべてのリスクを引き受けることに同意します。