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

各グラデーションには複数のレイヤーを重ねられ、レイヤーごとに種類、角度、色を設定できます。出力はベンダープレフィックス不要の純粋なCSSで、そのままプロジェクトに貼り付けられます。ページのリンクにグラデーションが保存されるので、共有したり後で開き直したりできます。

グラデーションジェネレーターの使い方

グラデーションの種類を選ぶ
レイヤーごとに線形、放射状、円錐を選びます。線形は直線に沿って色を混ぜ、放射状は中心点から広げ、円錐は中心の周りを回転させます。

色とレイヤーを調整する
カラーバーをクリックするとカラーストップを追加でき、ドラッグで位置を変更できます。色は透明度も含めて自由に設定できます。レイヤー追加ボタンで、別のグラデーションを上に重ねられます。

デザインをプレビューする
全画面、正方形、横長・縦長の長方形、円、星の6つの形でグラデーションを確認できます。形の後ろの背景も変更できます。