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

データソース webgradients.com
概要
Generated by AI

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

主な機能

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

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

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

クイックコピー

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

色の抽出

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

クイックナビゲーション

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

使用方法

グラデーションを閲覧

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

クイック位置決め

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

CSSコードをコピー

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

個別の色をコピー

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

適用シーン

ウェブ背景

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

使用例:

.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コードタイプを手動で変更してください
もっと見る