CSSグラデーションテキスト生成ツール
文字にグラデーションをかけてCSSコードをそのままコピー
テキストに線形・円形のグラデーションをかけてプレビューで確認し、完成したCSSコードをすぐにコピーできるツールです。カラーストップ、角度、フォントサイズや太さを調整しながら仕上がりを目で確かめられるので、デザイナーやフロントエンドエンジニアに便利です。計算はすべてブラウザ内で即座に処理され、サーバーには送信されません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- テキスト入力欄に好きな文言を入力します。
- グラデーションの種類（線形／円形）を選び、角度または中心位置を調整します。
- カラーストップを追加・削除しながら色と位置（%）を調整し、狙いどおりのグラデーションに仕上げます。
- プレビューを確認したら、生成されたCSSコードをコピーボタンで取得します。
よくある質問
- カラーストップはいくつまで追加できますか？
- 最小2個から最大4個まで、カラーストップを追加・削除できます。
- 生成されたCSSはすべてのブラウザで動きますか？
- background-clip: text を使用し、WebKit系ブラウザ向けに-webkit-プレフィックス付きも併記しています。ただしこのプロパティに対応していない古いブラウザでは、グラデーションが適用されずフォールバックのcolorだけが表示される場合があります。
- 入力したテキストや色の情報はサーバーに保存されますか？
- いいえ。すべての処理はブラウザ内だけで行われ、サーバーへ送信・保存されることはありません。