人気カラーグラデーションライブラリ

グラデーションコレクションを閲覧

グラデーションスウォッチのグリッドをスクロールして、さまざまな色の組み合わせやスタイルを探しましょう。各グラデーションには名前とカラーコードが表示されます。

個々の色を表示する

グラデーションの左半分をクリックすると開始色を、右半分をクリックすると終了色を見ることができます。HEXコードは2秒間表示されます。

グラデーションCSSをコピー

任意のグラデーションの下にある「グラデーションをコピー」ボタンをクリックすると、完全なCSS backgroundプロパティがクリップボードにコピーされます。

プロジェクトで使用する

コピーしたCSSコードをスタイルシートまたはインラインスタイルに貼り付けてください。グラデーションはlinear-gradient形式でそのまま使用できます。

100種類以上の厳選されたグラデーション

スタイルやカラーテーマ別に整理された、100種類以上の美しいグラデーションの組み合わせの厳選コレクションにアクセスできます。簡単に閲覧可能です。

インタラクティブなカラープレビュー

どのグラデーションスウォッチでも、左半分または右半分をクリックすると、個々の開始色と終了色をHEXコードとともに表示できます。

ワンクリックでCSSをコピー

コピーボタンをワンクリックするだけで、すぐに使えるCSS linear-gradientコードをクリップボードに瞬時にコピーできます。

視覚的なグラデーショングリッド

グラデーション名とカラーコードが明確に表示された、すっきりとしたモダンなグリッドレイアウトでグラデーションを閲覧し、素早く参照できます。

プロによる厳選

当社のコレクションのすべてのグラデーションは、視覚的な魅力とデザインの汎用性のために慎重に選択されており、高品質な色の組み合わせを保証します。

すぐに使えるCSS

そのまま使えるCSSコードをすぐに手に入れられます。グラデーションの構文を手動で記述したり、色の値を試行錯誤したりする必要はありません。

インタラクティブな色確認

スウォッチの異なる部分をクリックすることで個々のグラデーションの色を表示でき、使用されている正確な色を簡単に把握できます。

時間を節約するデザインツール

グラデーションをゼロから作成する試行錯誤を省きましょう。最適なグラデーションを素早く見つけ、プロジェクトに即座に実装できます。