CSSグラデーションジェネレーター：Webサイト用の美しいグラデーションを作成
CSSグラデーションを使用すると、画像ファイルを必要とせずに、ブラウザ内で2つ以上の色間のスムーズな遷移を作成できます。ブラウザがCSS3でグラデーションをサポートして以来、グラデーションはWebデザインで最も人気のある視覚的技法の1つになっています。
CSSグラデーションの種類
線形グラデーション。 色は直線に沿って遷移します。to right、to bottomなどのキーワードまたは度単位の角度を使用します。
background: linear-gradient(to right, #ff7e5f, #feb47b);
放射状グラデーション。 色は中心点から外側に向かって放射します。
background: radial-gradient(circle, #ff7e5f, #feb47b);
円錐グラデーション。 色は中心点の周りを円錐状に遷移します。
background: conic-gradient(#ff7e5f, #feb47b, #ff7e5f);
カラーストップを理解する
カラーストップは、グラデーション内で各色が開始および終了する位置を定義します。
background: linear-gradient(90deg, red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
美しいグラデーションのためのヒント
- 類似した色相を使用して繊細でエレガントな遷移を。
- 補色は鮮やかで目を引くグラデーションを作成します。
- 3色グラデーションは2色よりも洗練されて見えることが多いです。
- コントラストをテストしてテキストの可読性を確認してください。
グラデーションを視覚的に生成する
無料のCSS Gradient Generatorを使用すると、直感的なビジュアルインターフェースで線形、放射状、円錐グラデーションを作成、プレビュー、エクスポートできます。カラーホイールで色を選択し、ストップをドラッグして調整し、生成されたCSSをワンクリックでコピーできます。