グラデーションコレクションを閲覧
グラデーションスウォッチのグリッドをスクロールして、さまざまな色の組み合わせやスタイルを探しましょう。各グラデーションには名前とカラーコードが表示されます。
個々の色を表示する
グラデーションの左半分をクリックすると開始色を、右半分をクリックすると終了色を見ることができます。HEXコードは2秒間表示されます。
グラデーションCSSをコピー
任意のグラデーションの下にある「グラデーションをコピー」ボタンをクリックすると、完全なCSS backgroundプロパティがクリップボードにコピーされます。
プロジェクトで使用する
コピーしたCSSコードをスタイルシートまたはインラインスタイルに貼り付けてください。グラデーションはlinear-gradient形式でそのまま使用できます。
100種類以上の厳選されたグラデーション
スタイルやカラーテーマ別に整理された、100種類以上の美しいグラデーションの組み合わせの厳選コレクションにアクセスできます。簡単に閲覧可能です。
インタラクティブなカラープレビュー
どのグラデーションスウォッチでも、左半分または右半分をクリックすると、個々の開始色と終了色をHEXコードとともに表示できます。
ワンクリックでCSSをコピー
コピーボタンをワンクリックするだけで、すぐに使えるCSS linear-gradientコードをクリップボードに瞬時にコピーできます。
視覚的なグラデーショングリッド
グラデーション名とカラーコードが明確に表示された、すっきりとしたモダンなグリッドレイアウトでグラデーションを閲覧し、素早く参照できます。
カラーグラデーションとは、2色以上の色が滑らかに変化し、視覚的に魅力的なブレンドを生み出すものです。ウェブデザインにおいて、CSSリニアグラデーションを使用すると、指定された方向に流れるこのような色の変化を作成できます。当社のライブラリは、プロが厳選したグラデーションの組み合わせを特徴としており、背景、ボタン、カード、その他のデザイン要素に調和の取れた色の変化を見つける時間を節約できます。
プロによる厳選
当社のコレクションのすべてのグラデーションは、視覚的な魅力とデザインの汎用性のために慎重に選択されており、高品質な色の組み合わせを保証します。
すぐに使えるCSS
そのまま使えるCSSコードをすぐに手に入れられます。グラデーションの構文を手動で記述したり、色の値を試行錯誤したりする必要はありません。
インタラクティブな色確認
スウォッチの異なる部分をクリックすることで個々のグラデーションの色を表示でき、使用されている正確な色を簡単に把握できます。
時間を節約するデザインツール
グラデーションをゼロから作成する試行錯誤を省きましょう。最適なグラデーションを素早く見つけ、プロジェクトに即座に実装できます。
このライブラリには、微妙な変化から大胆で鮮やかなブレンドまで、さまざまなデザインのニーズに適した、100種類以上の厳選されたグラデーションの組み合わせが含まれています。
グラデーションスウォッチの左半分をクリックすると開始色を、右半分をクリックすると終了色を見ることができます。HEXコードはスウォッチ上に2秒間表示されます。
このツールは、左から右へ（to right方向）進むlinear-gradientを含む完全なCSS backgroundプロパティをコピーします。例: background: linear-gradient(to right, #FF6B6B, #4ECDC4);
はい、ライブラリ内のすべてのグラデーションは、個人的および商業プロジェクトで制限なく自由に使用できます。カラーグラデーションは著作権で保護されません。
CSSコードをコピーしたら、スタイルシートまたはインラインスタイルとして貼り付けます。div、セクション、ボタン、カードなど、あらゆる要素の背景に適用できます。
はい、CSSをコピーした後、「to right」の部分を「to bottom」、「to top」、「45deg」、またはお好みの角度に変更することで、方向を変更できます。