🌈
無料CSS グラジエントジェネレーター
ライブ プレビューを使用して、線形、放射状、円錐形の CSS グラデーションを作成します。ワンクリックでCSSをコピーします。
読み込み後はオフラインでも動作
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);大きく異なる色の間で中間がくすんだグレーになるのを防ぎます。古いブラウザー向けに、通常のsRGB行をフォールバックとして追加します。
0%
100%
プリセット
主な用途
- ヒーロセクション用のグラデーションを作成Webサイトのヒーローセクションとランディングページ用に、ページ全体のグラデーション背景をデザイン。
- グラデーションボタンとCTAを作成目を引くグラデーションボタン背景をデザインして、アクションへのコールアウトを際立たせる。
- カード用のグラデーション背景を作成カード、モーダル、サイドバー、UIコンポーネント背景用のグラデーション塗りをデザイン。
- ソーシャルメディアグラフィック用のグラデーションを作成Instagram投稿、YouTubeサムネイル、Twitterカード用の活気あるグラデーション背景をデザイン。
- チャート用のカラースケールを作成ヒートマップ、進捗バー、データビジュアライゼーション用のグラデーションカラースケールを生成。
使い方
グラデーションジェネレーターはCSSグラデーション文字列をブラウザ内で直接構築します — ライブラリ、サーバー、アップロードは不要です。手書きの関数が、色の停止点と角度からリアルタイムで正しいlinear-gradient、radial-gradient、conic-gradientの構文を組み立て、選択した出力先に応じて結果を整形します。
- 1色の停止点と方向を設定するブラウザ標準のカラーピッカーを使って2〜6個の色の停止点を設定し、レンジスライダーで各停止点を0〜100%の軸に沿って配置します。linearとconicのグラデーションでは角度（0〜360°）も選び、radialのグラデーションでは形状（楕円または円）とグラデーションがどこまで広がるかを制御するサイズキーワードを選びます。
- 2buildCssがグラデーション文字列を組み立てる変更のたびに、ローカルのbuildCss関数がパラメータを正しいCSS関数呼び出しに連結します — 例：linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)。ライブラリは関与せず、文字列は単純なJavaScriptのテンプレートロジックで構築され、停止点の配列から直接結合されます。
- 3ライブプレビューはインラインスタイルを介して描画される組み立てられたグラデーション文字列はdiv要素にインラインの背景スタイルとして直接適用されるため、ブラウザ自体のCSSエンジンがプレビューを描画します。canvasも画像も関与しません — 見えているものは文字通り適用されているCSSプロパティです。
- 44つの形式ですぐコピーできる出力形式セレクターは同じグラデーション文字列を、プレーンなCSS（background: ...）、単色フォールバック付きCSSブロック、Tailwindの任意値クラス、SCSS変数宣言のいずれかに変換します。「コピー」をクリックすると、選択された出力がnavigator.clipboard.writeTextを介してクリップボードに書き込まれます。現在のグラデーションはURLハッシュにもエンコードされ、ブックマークや共有ができます。