グラデーションメーカー

グラデーションツールの使い方 - ノードの作成、調整、CSSのコピー。

自由に位置を調整できる2～6個のノード、濁りのないOKLCH補間、48個の厳選されたプリセットを搭載。

1. 01

   ノードを作成

   2～6個のノード：各色を選択し、位置をドラッグするか、HEX値を貼り付けます。

2. 02

   調整

   線形/放射状/円錐グラデーションを切り替え、角度をドラッグするか、ワンクリックで厳選プリセットを適用します。

3. 03

   コピー

   スムーズモードがOKLCHの中点を自動的に展開し、CSSをそのまま貼り付け可能で、リンクにグラデーション情報が含まれます。

グラデーション FAQ

ユーザーが実際に質問する4つの項目です。

なぜグラデーションの中央が灰色になるのですか？

RGB補間は低彩度の領域を通過します。OKLCH補間は色相に従うため、中間はクリーンなままです。

ストップを追加できますか？

はい - 2～6個のストップを追加でき、それぞれに独自の色と位置を設定できます。スムーズモードでは隣接するストップの間にOKLCHの中間点が挿入されるため、グラデーション全体がクリーンな状態を保ちます。

エクスポートしたCSSはどのブラウザで動作しますか？

すべての最新ブラウザで動作します。このツールはプレーンなRGBストップを出力するため、古いエンジンでも変換は必要ありません。

グラデーションを共有するにはどうすればよいですか？

すべての調整はページURL（#g=...）に同期されます。アドレスバーのリンクをチームメイトに送信すると、調整した状態のまま開きます。

結果を取得した後

ここから先に進み、色を活用しましょう。