CSSグラデーション生成ツール
線形・放射・円錐のCSSグラデーションをライブプレビューで美しくデザインし、コードをワンクリックでコピー
ライブプレビュー
グラデーションの種類
カラーストップ
プリセット
CSSコード
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);すべてブラウザ内で生成され、サーバーには何も送信されません。
このツールについて
このCSSグラデーション生成ツールは、なめらかな色のブレンドを視覚的にデザインし、貼り付けるだけのCSSをワンクリックでコピーできます。線形・放射・円錐から種類を選び、カラーストップを好きなだけ追加して、各ストップの色をネイティブのカラーピッカーまたはHEX入力で、位置を0〜100%で細かく調整できます。線形グラデーションでは0〜360度の任意の角度を設定でき、方向ボタンでの素早い指定も可能です。放射グラデーションは円・楕円の形状に対応し、円錐グラデーションは中心の周りに色を回転させます。大きなライブプレビューが即座に更新されるので、作っている結果がそのまま確認できます。厳選したプリセットから始め、ランダムボタンで新しいアイデアを得て、生成されたbackgroundプロパティをスタイルシートにコピーしましょう。すべてブラウザ内で動作するため、高速・プライベートで、オフラインでも使えます。
使い方
- 1 グラデーションの種類（線形・放射・円錐）を選びます。
- 2 カラーストップを追加し、各ストップの色（ピッカーまたはHEX）と位置（0〜100%）を設定します。
- 3 線形・円錐は角度を、放射は形状を調整します。プリセットの読み込みも可能です。
- 4 ライブプレビューを確認し、「CSSをコピー」でbackgroundプロパティをプロジェクトに貼り付けます。
仕組み
このツールは設定から標準的なCSSグラデーション関数を組み立てます。線形グラデーションは linear-gradient(角度, ストップ) を使い、角度がグラデーション線の向きを決め、各カラーストップは色とパーセント位置で記述されます。放射グラデーションは radial-gradient(形状 at center, ストップ) で中心から外側へ色を広げ、円錐グラデーションは conic-gradient(from 角度 at center, ストップ) で点の周りに色を回転させます。カラーストップは出力前に位置で自動的に並べ替えられるため、追加した順序は問題になりません。位置は0〜100%にクランプされ、ストップは常に最低2つ保持されるので、生成されるCSSは常に有効です。結果はプレフィックス不要で最新ブラウザにそのまま使えるbackground宣言です。
よくある質問
線形・放射・円錐グラデーションの違いは何ですか？
線形グラデーションは角度で指定した直線に沿って色をブレンドします。放射グラデーションは中心点から円または楕円状に外へ色を広げます。円錐グラデーションは中心点の周りに色を回転させ、円グラフやカラーホイール、角度的な効果に便利です。3種類ともネイティブCSSで、すべての最新ブラウザでサポートされています。
カラーストップはいくつ追加できますか？
必要なだけ追加できます。グラデーションが有効であり続けるよう、常に最低2つは保持されます。各ストップは独自の色と0〜100%の位置を持ちます。ストップを増やすことで、虹や多色背景、なめらかな多色のグラデーションを作れます。
角度のコントロールは何をしますか？
線形グラデーションでは、角度が色の線の向きを決めます。0度が上、90度が右、180度が下、270度が左で、どの方向にもブレンドを向けられます。円錐グラデーションでは、角度がスイープの開始回転を決めます。スライダーのドラッグ、正確な値の入力、方向ボタンでの指定が可能です。
生成されたCSSは本番環境でそのまま使えますか？
はい。出力はネイティブのグラデーション関数を使った標準的なbackgroundプロパティで、ベンダープレフィックスなしで現行の全ブラウザで動作します。その行をコピーしてスタイルシート、インラインスタイル、コンポーネントに貼り付けるだけです。背景色を別に保ちたい場合はプロパティ名をbackground-imageに変えても構いません。
私のデータはどこかに送信されますか？
いいえ。生成ツール全体がJavaScriptとCSSでブラウザ内で動作します。色やグラデーションの情報がサーバーにアップロードされたり保存されることはなく、プライベートで、インターネットを切断しても動作し続けます。
関連ツールと使い道
グラデーション生成ツールはカラー変換ツール（正確なHEX・RGB・HSL値の取得）や、コントラストチェッカー（グラデーション上でテキストが読みやすいか確認）と組み合わせると便利です。デザイナーや開発者は、ウェブサイトやアプリのヒーロー背景、ボタン、カード、バッジ、装飾効果の作成に利用しています。