FIRST CH TOOLS LOCAL PROCESSING — サーバー送信なし EN

FIRST CH TOOLS / デザイン / 44 CSS GRADIENT GENERATOR

CSSグラデーションジェネレーター

直線（linear）・放射（radial）・扇形（conic）のグラデーションを、つまみをドラッグしながら組み立てて CSS を書き出します。OKLCH補間（in oklch）を選べば、鮮やかな2色の途中が灰色に濁りません。古いブラウザ向けの sRGB フォールバックも同時に出力します。

種類と向きを決めます

カラーストップ（つまみをドラッグ・バーをダブルクリックで追加）

色は #c8501f / rgb(200 80 31 / 0.5) / hsl(14 73% 45%) / oklch(56% 0.16 40) / tomato のどの書き方でも入れられます。つまみは矢印キーでも動かせます（Shiftで10%ずつ・Deleteで削除）。

プレビュー
2
ストップ数
135deg
向き・中心
oklch
補間色空間
0
CSSの長さ（文字）
生成したCSS 

  


  

    
チェック結果

    
    
  
    

  
    1色ぶんの変換（HEX ⇄ RGB ⇄ HSL ⇄ OKLCH・アルファ合成）は Colorコード変換＆アルファ透過計算機にあります。文字色と背景色の読みやすさは コントラスト比チェッカー、画面幅に応じて変わるサイズは CSS clamp() 計算機で作れます。
    
  
    

  

  

  
    
    
    How to Use
    
    
      
      
    1. 種類と向きを決める直線・放射・扇形から選び、角度（または中心の位置）を決めます。方角のボタンで 0deg〜315deg をすぐ入れられます。
      2. 
      
    2. 色を置くバーのつまみをドラッグして位置を、行の色見本や文字入力で色を変えます。バーをダブルクリックすると、その位置にストップが増えます。
      3. 
      
    3. コピーして貼る「値をコピー」で linear-gradient(…) だけ、「宣言をコピー」でフォールバック込みの3行を取れます。
      4. 
    
    
  
    

  
    
    
    About This Tool
    
    
    グラデーションは「どこに何色を置くか」だけで決まります。このツールは、位置（0〜100%）と色の組＝カラーストップをGUIで並べ、linear-gradient / radial-gradient / conic-gradient の CSS に組み立てます。つまみのドラッグ・ダブルクリックでの追加・均等配置・反転など、値を直接打たずに形を決められます。角度はスライダーと方角ボタンの両方から指定できます。
    
    
    OKLCH補間を既定にしています。CSSの既定は sRGB の値をそのまま混ぜるため、色相の離れた鮮やかな2色の中間が灰色に濁ります。in oklch を付けると知覚的に均等な色空間で補間するので、明るさと鮮やかさが途中でも保たれます。色相環をどちら回りで行くか（shorter / longer）も選べ、longer hue の扇形にすると色相環そのものを描けます。
    
    
    古いブラウザ向けのフォールバックを同時に出します。補間色空間の指定を読めないブラウザは、その宣言をまるごと捨ててしまいます。そこで、同じ曲線を近似するように中間色を sRGB のストップとして焼き込んだ行を先に置き、その下に本来の in oklch 版を書きます。焼き込みの計算は CSS Color 4 の色補間に合わせ、アルファを乗算してから混ぜ、色相は指定の回り方で補正しています（半透明のストップがあっても途中が濁りません）。
    
    
    1色ぶんの変換は /color/ と補完関係にあります。HEX ⇄ RGB ⇄ HSL ⇄ OKLCH の変換・アルファ合成・明度パレットは Colorコード変換＆アルファ透過計算機、そこで決めた色をグラデーションに並べるのがこのページです。計算はすべてブラウザ内で完結し、入力はサーバーへ送信されません。URLパラメータで直接呼び出せます: /gradient/?type=linear&angle=135&space=oklch&stops=%23c8501f@0|%2323282e@100
    
  
    

  
    
    
    Other Tools