CSSグラデーションを視覚的に作成。コードをワンクリックコピー。
CSSのlinear-gradientやradial-gradientを視覚的に作成する無料ツールです。色の選択、角度の調整、カラーストップの追加をGUIで行い、完成したCSSコードをそのままコピーして使えます。
2色以上の色を直線的に変化させるグラデーションです。角度を指定して斜めや水平方向のグラデーションを作成できます。ボタンの背景、ヘッダーのデザイン、テキストのグラデーションなどに使われます。
中心から外側に向かって色が変化するグラデーションです。円形や楕円形のグラデーションを作成できます。背景デザインやアイコンの光沢表現に効果的です。
CSSのグラデーションは「色が連続的に変化する画像」を生成する関数で、background や background-image プロパティに指定して使います。代表的なものに linear-gradient（線形）と radial-gradient（円形）があり、いずれも複数の「カラーストップ」（色と位置の組）を並べて色の移り変わりを定義します。
linear-gradient は、指定した一直線の方向に沿って色が変化するグラデーションです。ヘッダーやボタンの背景など、面全体を一定の向きで塗り分けたい場面に向きます。radial-gradient は中心点から外側へ放射状に色が広がるグラデーションで、円形（circle）や楕円形（ellipse）の光沢やスポットライトのような表現に使われます。このツールが生成するのは linear-gradient 形式のコードで、3色のカラーストップと角度を指定できます。
linear-gradient では、グラデーションが進む向きを角度（deg）で指定します。0deg は下から上、90deg は左から右、180deg は上から下、270deg は右から左です。45deg や 135deg のように斜めの角度を指定すると、対角線方向に色が変化します。to right・to bottom などのキーワードでも方向を表せますが、本ツールの角度スライダーは deg 形式で 0〜360 度の値を出力します。
カラーストップは「どの色を」「どの位置で」表示するかを表すものです。linear-gradient(90deg, #ff0000 0%, #0000ff 100%) のように色のあとへ位置%を書くと、その位置でぴったりその色になります。位置を省略すると、指定した順に色が等間隔で配置されます。本ツールは色1・色2・色3を等間隔に並べた linear-gradient を生成します。
| 指定例 | 意味 |
|---|---|
| linear-gradient(90deg, #ff0000, #0000ff) | 左から右へ赤→青の横方向グラデーション |
| linear-gradient(180deg, #fff, #000) | 上から下へ白→黒の縦方向グラデーション |
| linear-gradient(135deg, #6366f1, #ec4899, #f97316) | 左上から右下へ3色を変化させる斜めグラデーション（本ツール初期値に近い形） |
| linear-gradient(to right, #11998e, #38ef7d) | キーワード指定で左から右へ変化（90degと同じ向き） |
| radial-gradient(circle, #fff, #000) | 中心から外側へ白→黒の円形グラデーション |