CSS Gradient Generator

CSS グラデーションとは？

CSS グラデーションは、2つ以上の色の間で滑らかな色の遷移を作成します。ボタン、ヘッダー、ヒーローセクション、装飾要素の背景としてよく使用されます。linear-gradient() で任意の角度の直線的な遷移を、radial-gradient() で円形または楽円形の遷移を作成できます。

Linear Gradient と Radial Gradient の比較

Linear Gradient は直線軸に沿って進みます——上から下、左から右、または任意の角度です。Radial Gradient は中心点から外側に放射状に広がり、円形または楽円形になります。どちらのタイプも、位置調整可能な任意の数のカラーストップをサポートします。

美しいグラデーションのコツ

• クリーンな外観には色を 2～3 色までにしましょう。
• 似た色合い（例：ブルー → ティール）は調和のとれた効果を生みます。
• カラーストップを近づけすぎないようにして、硬い境界線を避けましょう。
• さまざまな画面サイズでグラデーションをテストしましょう。