180の美しい線形グラデーションの無料リソースライブラリを提供します。各グラデーションは丁寧にデザインされ、調和のとれた配色で、CSSコードとして直接コピーしてウェブデザイン、UIインターフェース、背景装飾などのシーンで使用できます。すべてのグラデーションはwebgradients.comプロジェクトからのものです。

主な機能

グラデーションプレビュー

ページには180の異なるグラデーション効果が表示され、各グラデーションは円形パターンとして提示され、色の遷移と方向が明確に見えます。グラデーションには様々なトーンとスタイルが含まれています:

暖色系:赤、オレンジ、黄色のグラデーションシリーズ
寒色系:青、緑、シアンのグラデーションシリーズ
中間色系:灰色、茶色、ベージュのグラデーションシリーズ
鮮やかな色:高彩度の明るいグラデーション
柔らかい色:低彩度の優しいグラデーション
多色ブレンド:3色以上の複雑なグラデーション

クイックコピー

各グラデーションカードには、ワンクリックでCSSコードをコピーする機能が提供されています。「CSSをコピー」ボタンをクリックすると、完全なbackground-imageプロパティコードがクリップボードにコピーされ、プロジェクトに直接貼り付けることができます。

色の抽出

各グラデーションの下には、そのグラデーションを構成するすべての色ブロックが表示されます。任意の色ブロックをクリックすると、その色の16進数コードを個別にコピーでき、同じ色を他の場所で使用するのに便利です。

クイックナビゲーション

ページ上部にはサムネイルグリッドが提供され、各小さな四角形は対応するグラデーション効果を表示します。マウスをホバーするとグラデーション名が表示され、サムネイルをクリックすると自動的にそのグラデーションにスクロールし、目的の効果を素早く見つけることができます。

使用方法

グラデーションを閲覧

CSSグラデーションページを開く
下にスクロールしてすべてのグラデーション効果を閲覧
各カードには、グラデーション名、円形グラデーションプレビュー、構成色ブロック、CSSコピーボタンが表示されます

クイック位置決め

ページ上部のサムネイルグリッドを表示
マウスをホバーしてグラデーション名を確認
サムネイルをクリックして自動的にそのグラデーションにスクロール

CSSコードをコピー

好みのグラデーションを見つける
カードの右上隅にある「CSSをコピー」ボタンをクリック
ボタンのテキストが緑色に変わり、コピー成功を示します
CSSファイルまたはスタイルタグに貼り付け
グラデーション効果を必要とする要素に適用

個別の色をコピー

グラデーションの下の色ブロックを表示
任意の色ブロックをクリック
その色の16進数コードがコピーされます
ブロックに緑色の枠線が表示され、コピー成功を示します

適用シーン

ウェブ背景

ウェブページにグラデーション背景を追加して、より層次感があり視覚的に魅力的なページにします。メインページ背景、セクション背景、カード背景、ボタン背景に使用できます。

使用例:

.hero-section {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

UI要素の装飾

インターフェース要素にグラデーション効果を追加:ボタンとリンクのホバー効果、ナビゲーションバーの背景、サイドバーの装飾、タグとバッジ。

仕切り線と枠線

グラデーションを使用して独特な仕切り線を作成:

.divider {
  height: 2px;
  background-image: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

テキスト効果

CSSプロパティと組み合わせてグラデーションテキストを作成:

.gradient-text {
  background-image: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

画像オーバーレイ

画像に半透明のグラデーションを重ねて可読性を向上:

.image-overlay {
  background-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
}

使用のヒント

適切なグラデーションを選択

用途に基づく

背景グラデーション:コンテンツを妨げないように、柔らかく低コントラストのグラデーションを選択
装飾要素:鮮やかで高コントラストのグラデーションを選択可能
テキスト背景:テキスト色とグラデーションのコントラストが十分であることを確認し、可読性を保証

ブランドカラーを考慮

ブランドの主要色に近いグラデーションを探す
グラデーションから色を抽出して他のデザイン要素に使用
全体的な配色の調和を維持

グラデーションパラメータを調整

コピーされたCSSコードはさらに変更できます:

角度を変更

/* オリジナル */
linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)

/* 垂直グラデーションに変更 */
linear-gradient(180deg, #a1c4fd 0%, #c2e9fb 100%)

/* 対角グラデーションに変更 */
linear-gradient(45deg, #a1c4fd 0%, #c2e9fb 100%)

色の位置を調整

/* 色遷移を中央に集中 */
linear-gradient(120deg, #a1c4fd 40%, #c2e9fb 60%)

透明度を追加

/* rgbaを使用して透明度を追加 */
linear-gradient(120deg, rgba(161,196,253,0.8) 0%, rgba(194,233,251,0.8) 100%)

組み合わせ使用

複数のグラデーションを重ねることができます:

.element {
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.2), transparent),
    linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

ブラウザの互換性

現代のブラウザはlinear-gradientをサポートしていますが、より良い互換性のためにプレフィックスとフォールバックソリューションを追加:

.element {
  background: #a1c4fd; /* フォールバック単色背景 */
  background-image: -webkit-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

注意事項

すべてのグラデーションはwebgradients.comオープンソースプロジェクトからのもので、個人および商用利用は無料です
グラデーション効果は異なるブラウザでわずかに異なる場合があります。主要ブラウザでのテストをお勧めします
グラデーションを使用する際は、コンテンツとのコントラストに注意し、テキストが明確に読めることを確認してください
グラデーションの過度な使用はデザインを雑然と見せる可能性があります。適度な使用をお勧めします
コピーされたCSSコードは16進数の色値を使用しており、rgbまたはhsl形式にも変換できます
コピーをクリックした後、手動で貼り付ける必要があります。ページを閉じる前にコピー成功を確認してください
グラデーション角度0degは下から上、90degは左から右、というように続きます
ブラウザの開発者ツールでグラデーションパラメータをリアルタイムで調整して効果を確認できます
暗い背景に明るいグラデーション、明るい背景に暗いグラデーションを使用すると、より良い効果が得られます
放射グラデーションや円錐グラデーションが必要な場合は、CSSコードタイプを手動で変更してください

CSS グラデーションライブラリ