Tool Hub

グラデーション生成

CSS linear / radial / conic グラデーション — カラーストップ・プレビュー・コードコピー

カスタムカラーストップと角度で CSS グラデーション (linear, radial, conic) を作成します。各ストップを調整するとライブプレビューが即時更新され、生成された CSS はそのままスタイルシートにコピーできます。

カラーストップ

プリセットギャラリー

プレビュー

CSS
background: linear-gradient(90deg, #7c3aed 0%, #3b82f6 100%);

使い方

  1. Choose the gradient type: linear, radial, or conic.
  2. Add color stops and drag them to set each color's position; for linear and conic, set the angle in degrees.
  3. The preview pane updates live as you edit.
  4. Copy the generated CSS background value straight into your stylesheet.

例

  • Two stops at #ff7e5f (0%) and #feb47b (100%) on a 90deg linear gradient produce the CSS background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%).
  • Switching to radial type with the same stops creates a soft glow from the center outward, shown live in the preview.

本番環境で使用する前に出力を検証してください。保証なし — 詳細は 利用規約.