ホーム > デザイン > CSSグラデーションジェネレーター

他のツール

カラーピッカーCSS 影生成器PX から PT 変換ツールPX から REM 変換ツールPX から EM 変換ツールオンライン懐中電灯 / 画面ナイトライトオンライン画面ドット抜けテストSVGオンラインプレビュー画像角丸切り抜き画像レイヤー合成プレビュー

CSSグラデーションジェネレーター

線形・放射・円錐グラデーションに対応したオンラインCSSグラデーションジェネレーター。リアルタイムプレビューと豊富なプリセットを搭載。

グラデーションプレビュー
%
%
deg
linear-gradient(90deg, #3498db 0%, #9b59b6 100%)
サンセット
オーシャン
フォレスト
ファイア
パープル
レインボー

ツール概要：CSSグラデーションジェネレーター

CSSグラデーションジェネレーターは、CSSのグラデーション効果を素早く作成・カスタマイズできるプロ向けオンラインツールです。線形・放射・円錐グラデーションに対応し、リアルタイムプレビューと多数のプリセットを備えています。

CSSグラデーションジェネレーターとは？

CSSグラデーションジェネレーターはCSS グラデーションを作成してコードを出力するし、素早くプレビューと出力ができます。

主な機能

多彩なグラデーションタイプ

  • 線形グラデーション：直線方向に色が変化
  • 放射グラデーション：中心から広がる円形または楕円形のグラデーション
  • 円錐グラデーション：中心点を軸に色が回転

リアルタイムプレビュー

  • WYSIWYGでグラデーションを確認
  • CSSコードを即時更新
  • 大きなプレビューエリアに対応

カラー管理

  • 複数のカラーストップを追加
  • 各色の位置を0〜100%で細かく設定
  • HEX・RGB・HSLなどすべてのCSSカラー形式に対応

グラデーションコントロール

  • 線形グラデーション：角度（0〜360度）を調整
  • 放射グラデーション：円形または楕円形を選択
  • 円錐グラデーション：中心位置を設定

方向プリセット

  • よく使う8方向の矢印ボタンを用意
  • 角度入力を手動で打たずに即座に更新
  • ハイライト表示で現在の方向を確認

プリセットテンプレート

魅力的なグラデーションプリセットを多数収録：

  • Sunset, Ocean, Forest
  • Fire, Sky, Purple Rain
  • Candy, Midnight など

履歴機能

  • 作成したグラデーションを自動保存
  • クリック一つで過去のグラデーションを復元
  • 履歴のクリア機能付き

便利なツール

  • CSSコードをクリップボードにコピー
  • ランダムグラデーションの生成
  • カラーの順序を反転

使い方

基本ステップ

  1. グラデーションタイプを選択：画面上部で線形・放射・円錐を選ぶ
  2. パラメーター調整：タイプに応じて値を設定、または方向プリセットを利用
  3. 色を追加：「カラーを追加」ボタンでカラーストップを挿入
  4. 色を調整：色を選び、配置を微調整
  5. プリセットを適用（任意）：カードをクリックして完成済みグラデーションを読み込み
  6. コードをコピー：「コードをコピー」でCSSを取得

線形グラデーションの設定

  • スライダーまたは数値入力で方向を調整
  • 角度範囲：0〜360度
  • 0°は下から上、90°は左から右

放射グラデーションの設定

  • 形状を円形または楕円形から選択
  • デフォルトでは中心から外側へ広がる
  • CSSコードを編集して中心位置を変更可能

円錐グラデーションの設定

  • 中心点の水平・垂直位置を指定
  • パーセンテージまたはピクセル値に対応
  • 色は中心を軸に時計回りで回転

プリセットと履歴

  • プリセットにカーソルを合わせるとプレビュー、クリックで即適用
  • 各プリセットはカラーストップに基づいたライブプレビューを表示
  • 最近使用したグラデーションが自動保存され、履歴バーから復元可能
  • 履歴は最新10件のユニークなグラデーションを保持し、ブラウザのローカルストレージに保存

CSSコード例

線形グラデーション

background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);

放射グラデーション

background: radial-gradient(circle, #ff7e5f 0%, #feb47b 100%);

円錐グラデーション

background: conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%);

ブラウザー対応

  • 最新ブラウザー：すべてのグラデーションタイプを完全サポート
  • IE 10+：線形と放射グラデーションに対応
  • 円錐グラデーション：最新のモダンブラウザーが必要

活用シーン

CSSグラデーションは以下の用途で活躍します：

  1. Web背景：魅力的な背景効果を作成
  2. ボタン装飾：ボタンにグラデーションを追加
  3. カードデザイン：視覚的な階層を強化
  4. ローディングアニメーション：動きのあるグラデーションを演出
  5. ブランドデザイン：ブランドカラーを組み合わせたグラデーション

ヒント

  1. 色選び：適度なコントラストで目に優しい組み合わせを選択
  2. 位置調整：カラーストップをバランス良く配置し滑らかな変化を実現
  3. プレビュー確認：異なる背景で表示をチェック
  4. パフォーマンス：カラーストップの数を増やしすぎない
  5. レスポンシブ対応：さまざまな画面サイズでの見え方を確認

よくある質問

Q: 虹色のグラデーションを作るには？

A: 赤・オレンジ・黄・緑・青・藍・紫のカラーストップを均等に配置します。

Q: 一部のブラウザーで表示されない場合は？

A: ブラウザーのバージョンを確認し、必要な接頭辞（-webkit-、-moz-、-o-）を追加してください。

Q: 繰り返しパターンのグラデーションを作るには？

A: repeating-linear-gradient、repeating-radial-gradient、repeating-conic-gradient を使用します。

Q: グラデーションのパフォーマンスを最適化するには？

A: カラーストップを減らし、複雑すぎる構成を避け、必要に応じて画像を使用することを検討してください。