CSSグラデーション生成ツール｜色・角度・停止位置を調整

このツールでできること

2〜5色の線形グラデーションをプレビューしながら調整し、CSSのlinear-gradient()コードを生成できます。角度、各色、色が切り替わる停止位置を指定できます。

使い方

1. 角度を0〜360度で設定します。
2. 各色をカラーピッカーまたはHEXで指定し、停止位置を0〜100%で設定します。
3. 必要に応じて「色を追加」または各色の「削除」を使います。
4. 「CSSを生成」を押し、プレビューとコードを確認します。
5. 「CSSコードをコピー」を押して使用先へ貼り付けます。

入力例・出力例

角度90度、#FF0000 0%と#0000FF 100%の2色を指定すると、次のCSSを生成します。

background-image: linear-gradient(90deg, #FF0000 0%, #0000FF 100%);

2色へ同じ停止位置を指定すると、その位置で色が徐々に混ざらず明確に切り替わる境界を作れます。

よくある利用場面

• 背景やボタン用の線形グラデーションCSSを作るとき
• 2〜5色の停止位置と角度をプレビューしながら調整するとき
• カラーピッカーで選んだ色を6桁HEXへ揃えてコピーするとき

処理仕様

• 角度は0〜360、各停止位置は0〜100の整数です。停止位置は入力順に同じ値または大きい値を指定します。同じ位置を指定すると、色がはっきり切り替わる境界を作れます。
• 色は2〜5個です。#が任意の3桁または6桁HEXを入力でき、生成時に#付き6桁大文字へ揃えます。例えば09fは#0099FFになります。
• 有効なHEXを直接入力するとカラーピッカーとプレビューへ反映します。不正または入力途中のHEXでは、最後の正常なカラーピッカーとプレビューを保持します。
• 「色を追加」では最後の2色の中間停止位置へ白を挿入します。最大5色まで追加でき、削除しても2色未満にはなりません。
• 有効な設定変更はプレビューへすぐ反映され、以前に生成したCSSは無効になります。不正な入力中は最後の正常なプレビューを保持し、生成時は最初の不正な入力へフォーカスします。
• 生成形式はbackground-image: linear-gradient(角度, 色 停止位置, ...);の1行です。

入力データについて

入力した設定とCSSの生成はブラウザ内で処理され、ToolRollのサーバーや外部サービスへ送信されません。外部ライブラリを読み込まず、Cookie、Web Storage、IndexedDBへ保存する処理もありません。「CSSコードをコピー」を押したときだけ、生成結果を端末のクリップボードへ書き込みます。