YUCTS Tools
日本語言語

CSS グラデーション作成ツール（線形・放射）

線形・放射グラデーションの色標（カラーストップ）と角度を編集し、プレビューを見ながら CSS の background を作成してコピーできます。

  • ブラウザ内で処理（アップロードなし）
グラデーションの種類

0deg は下から上、90deg は左から右、180deg は上から下へ変化します（0〜360）。

色標（カラーストップ）

2〜10 個まで設定できます。CSS には位置の小さい順に出力します。

  1. 色標 1

  2. 色標 2

  3. 色標 3

結果

プレビュー

生成された CSS

background: #4158d0;
background: linear-gradient(90deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);

使い方

  1. 線形（linear）か放射（radial）を選び、角度、または形状と中心の位置を設定します。
  2. 色標の色（#RRGGBB など）と位置（0〜100%）を編集します。「色標を追加」で増やし、× で削除できます。
  3. プレビューを確認し、「CSS をコピー」で生成された CSS を貼り付けて使います。

よくある質問

角度の 0deg と 90deg はどちら向きですか？

CSS の linear-gradient では、0deg が下から上（to top）、90deg が左から右（to right）、180deg が上から下（to bottom）です。

同じ位置に 2 つの色標を置くとどうなりますか？

色がなめらかに変化せず、その位置でくっきり切り替わります。ストライプなどに使えます。

background が 2 行出力されるのはなぜですか？

1 行目は単色の予備（フォールバック）です。グラデーションに対応していない環境でも最初の色が表示されます。

色名（red など）や rgb() は使えますか？

安全のため、16 進数の色（#RGB、#RGBA、#RRGGBB、#RRGGBBAA）だけを受け付けます。それ以外の文字列は CSS に出力しません。

注意事項・制限

  • 入力内容はこのページ内でのみ処理され、YUCTS のサーバーには送信されません。
  • 色は 16 進数のみ対応しています。色名、rgb()、hsl()、transparent などのキーワードは使えません（透明にしたい場合は #RRGGBBAA の末尾 2 桁で指定します）。
  • 円錐グラデーション（conic-gradient）、繰り返しグラデーション（repeating-）、色の補間方法の指定には対応していません。
  • プレビューはお使いのブラウザでの表示です。古いブラウザでは 8 桁の色（#RRGGBBAA）が表示されない場合があります。