オンラインCSSグラデーションツール
CSS Gradientは、幸せな小さなWebサイトであり、Webサイトのグラデーションの背景を作成できる無料のツールです。
CSSグラデーションを使用すると、指定した2つ以上の色の間のスムーズな遷移を表示できます。
CSSは、次の2種類のグラデーションを定義しています。
- 線形グラデーション（下/上/左/右/対角）
- 放射状グラデーション（中心によって定義されます）
CSS線形グラデーション
線形グラデーションを作成するには、少なくとも2つのカラーストップを定義する必要があります。カラーストップは、スムーズなトランジションをレンダリングする色です。グラデーション効果とともに、開始点と方向（または角度）を設定することもできます。
構文
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
