CSS グラデーションジェネレーター 複数のカラーストップと角度制御を備えた美しい線形、放射状、円錐状のCSSグラデーションを作成します。

CSSグラデーションは、backgroundまたはbackground-imageプロパティを使用して定義されます。リニアグラデーションでは、linear-gradient()関数に方向（度またはto rightなどのキーワード）と色停止が続きます。各色停止には、色値とオプションの位置パーセンテージが含まれます。ラジアルグラデーションでは、radial-gradient()に形状（円や楕円）とサイズキーワードが使用されます。コニックグラデーションでは、conic-gradient()がスイープ色遷移に使用されます。複数の色停止により複雑な遷移を作成できます。2つの停止を同じ位置に使用してハードな色境界を作成することもできます。パフォーマンスのため、CSSグラデーションはブラウザによってレンダリングされるため、画像ダウンロードは必要ありません。また、解像度に依存せず、どのようなディスプレイ密度でもクリアな表示になります。古いブラウザーのサポートには-webkit-プレフィックスを使用しますが、モダンブラウザーではプレフィックスなしでグラデーションをサポートしています。グラデーションは、カンマで区切られた複数の背景値を使用して層状にできます。これにより、複雑な視覚効果を作成できます。background-sizeプロパティは、繰り返しパターンを作成する際の各グラデーションレイヤーのサイズを制御します。