グラデーション → CSSとは？

ビジュアルグラデーションビルダーで、複数のカラーストップを使ったリニア・ラジアル・コニックグラデーションをデザインし、CSSコードをコピーできます。ライブプレビューで角度、位置、色を調整できます。

ライブバー上で色ストップをドラッグするだけで、線形・放射状・円錐の各グラデーションを作成でき、プレビューはリアルタイムに更新されます。既存の CSS グラデーションを貼り付ければそのまま編集でき、プリセット(Sunset、Aurora、Rainbow など)からも選べます。出力はベンダープレフィックスや JavaScript を含まない素の CSS です。

使い方

1. グラデーションの種類（リニア、ラジアル、コニック）を選択し、方向や角度を設定してください。
2. グラデーションバーをクリックするか、カラーピッカーを使ってカラーストップを追加・削除・調整してください。
3. 生成されたCSSコードをコピーして、スタイルシートに直接貼り付けてください。

使用するタイミング

• ヒーローセクションの背景で、ストップ位置と角度を細かく決めたいとき。
• 既存スタイルシート内のグラデーションを貼り付けて GUI で直し、コピーして戻す。
• 円グラフ風の色分け背景や虹色のローダーを作るために conic-gradient を出力したい。

結果

サンセットグラデーションを試してみましょう：linear-gradient(135deg, #ff6b35 0%, #f72585 50%, #7209b7 100%)——ヒーローセクションの背景にぴったりです。

よくある質問

linear、radial、conic の違いは?

linear は直線方向に色を並べ、radial は中心から同心円状に広がり、conic は中心点の周囲を円グラフのように一周します。色ストップの記法は三者で共通です。

既存の CSS グラデーションを取り込むには?

完全な宣言を Import 欄に貼り付け、たとえば background: linear-gradient(135deg, #ff6b35, #f72585); として Import を押します。角度・ストップ・種類が解析されて GUI に反映されます。

一部のモニターで縞模様(バンディング)が出るのはなぜ?

離れた色相のストップと 8 ビットカラーのディスプレイが組み合わさるとバンディングが出ます。中間ストップを追加するか、角度の範囲を狭めると緩和します。HDR レンダリング対応ブラウザでは目立ちません。

出力を background-image として使えますか?

使えます。コピーした文字列は background、background-image のほか、CSS が画像値を受け付けるあらゆる場所、つまり border-image、mask、最新ブラウザの SVG fill にも入ります。

出力に -webkit- などのプレフィックスは付きますか?

付きません。linear、radial、conic は 2017 年以降、主要ブラウザでプレフィックスなしで動作します。今あえて付けてもスタイルシートが肥大化するだけなので、出力はそのままです。

関連ツール