CSS グラデーション ジェネレーター

使い方と仕様

種類は、線形（linear-gradient）・円形（radial-gradient）・円錐（conic-gradient）の3つで、「繰り返す」をオンにすると repeating- 付きで出力します。線形は 0〜360 の角度か、to right・to top left など8方向、円形は circle か ellipse と中心位置（%）、円錐は開始角度と中心位置を指定します。円形の大きさ（farthest-corner などの指定）は出さず、ブラウザの既定のままです。

色の止まりは2個以上20個まで。各止まりに、色（#rrggbb）・不透明度・位置（%）を指定します。不透明度が 1 なら #rrggbb、それ未満なら rgba() で出力します。位置を空欄にすると、最初は 0%、最後は 100%、間は前後の入力済みの位置のあいだを等分して割り振ります。出力は位置の昇順に並べ替え、同じ位置の止まりは入力した順のままなので、境目をくっきりさせたいときは同じ位置を2つ指定します。位置は 0〜100、角度は 0〜360 に丸め、小数は第2位までです。

「CSSを貼り付けて編集する」で読み込めるのは、このツールが出す形です。向きや形の指定があり、色が #rgb・#rrggbb・rgb()/rgba() で、位置が % のものに限ります。red のような色名、px や em の位置、var()、1つの色に位置を2つ書く形、範囲外の値は、理由を示して読み込みません。