プレビュー
グラデーション設定
CSSコード
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
プリセット
グラデーションの種類
指定した角度の直線に沿って色が変化します。
中心点から円形または楕円形に色が広がります。
中心点の周りを色相環のように色が回転して変化します。
CSSグラデーションジェネレーターについて
視覚的なビルダーでCSSグラデーションをデザインできます。線形、放射状、円錐グラデーションを選び、カラーストップを追加し、ドラッグで位置を調整して、ワンクリックでCSSコードをコピーできます。
CSSグラデーションの完全ガイド
無料オンラインCSSグラデーションジェネレーター
ライブプレビューでCSSグラデーションを作成できます。複数のカラーストップ、正確な角度調整、本番向けCSS出力に対応し、線形、放射状、円錐グラデーションをデザインできます。
CSSグラデーションとは？
CSSグラデーションは、2色以上の間をなめらかに変化させる表現です。画像ファイルなしで動的な背景を作成でき、HTTPリクエストを減らし、どの解像度でも鮮明で、画面サイズに合わせてきれいに拡大縮小できます。
CSSグラデーションの種類
線形グラデーション
- 直線に沿って色が変化します
- 角度または方向で定義します
- 最もよく使われる種類です
- 任意の数のカラーストップに対応します
- 背景やオーバーレイに適しています
放射状グラデーション
- 中心点から色が広がります
- 円または楕円の形状を使えます
- スポットライト効果を作れます
- 中心位置をカスタマイズできます
- 光彩効果に最適です
円錐グラデーション
- 中心点の周りを回転するように色が変化します
- 円グラフのようなパターンを作れます
- カラーホイール効果に便利です
- 開始角度をカスタマイズできます
- 装飾要素に適しています
主な機能
ビジュアルビルダー
- インタラクティブなライブプレビュー
- カラーストップをドラッグして位置調整
- HEX入力付きカラーピッカー
- 角度スライダーとクイックプリセット
- カラーストップを無制限に追加
CSS出力
- リアルタイムでCSSコードを生成
- グラデーション値または完全なプロパティをコピー
- 本番向けのきれいなコード
- 標準CSS3構文
- モダンブラウザで動作
プリセットとインスピレーション
- 美しいグラデーションプリセット12種類
- サンセット、オーシャン、コズミックなどのテーマ
- ランダムグラデーション生成
- 3種類すべてのグラデーションを収録
- ワンクリックでプリセットを読み込み
パフォーマンス上の利点
- 画像ファイルが不要
- 解像度に依存しない出力
- 画像よりページサイズを小さくできる
- GPUアクセラレーションで描画
- HTTPリクエストを削減
CSSグラデーション構文
/* Linear Gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Radial Gradient */
background: radial-gradient(circle, #ff9a9e 0%, #fad0c4 100%);
/* Conic Gradient */
background: conic-gradient(from 0deg, #ff0000, #00ff00, #0000ff, #ff0000);
このツールの使い方
- 種類を選択: 種類セレクターから線形、放射状、円錐グラデーションを選びます。
- 方向を設定: 線形と円錐グラデーションでは角度を調整し、放射状では円または楕円を選びます。
- 色を追加: カラーピッカーを使うか、HEX値を直接入力します。
- ストップ位置を調整: グラデーションバー上のカラーストップをドラッグするか、スライダーで位置を調整します。
- ストップを追加: 必要に応じてグラデーションへ色を追加します。
- プリセットを試す: プリセットを読み込んで、すぐにグラデーションのアイデアを試せます。
- CSSをコピー: グラデーション値または完全なCSSプロパティをクリップボードへコピーします。
グラデーションデザインのヒント
類似色を使う: 色相環で隣り合う色は、なめらかで調和したグラデーションを作りやすいです。
ストップを増やしすぎない: 通常は2から4個のカラーストップでクリーンな結果になります。多すぎると濁って見えることがあります。
コントラストを考慮: グラデーション背景の上でもテキストが読みやすいか確認しましょう。
控えめなグラデーション: 小さな色差は上品なUI背景を作ります。
オーバーレイ技法: 半透明グラデーションを画像に重ねると、印象的なヒーローセクションを作れます。
ブラウザ互換性
線形・放射状グラデーション: Chrome、Firefox、Safari、Edge、Operaを含むすべてのモダンブラウザで対応しています。
円錐グラデーション: 現在のChrome、Firefox、Safari、Edgeで対応しています。IEでは対応していません。
ベンダープレフィックス: モダンCSSグラデーションではベンダープレフィックスは不要です。標準構文が広く使えます。
こんな人に最適
- Webデザイナー
- フロントエンド開発者
- UI/UXデザイナー
- WordPress開発者
- SNSデザイナー
- メールテンプレートデザイナー
- ランディングページ制作者
- アプリ開発者
- ブランドデザイナー
- グラフィックデザイナー
- フルスタック開発者
- CSSを学ぶ学生
完全なプライバシー保護
すべてのグラデーション生成はJavaScriptを使ってブラウザ内で行われます。データがサーバーへ送信されることはないため、デザイン作業はプライベートに保たれます。