グラデーション生成

グラデーション生成でできること

CSSグラデーションを視覚的に編集し、コードを生成するツールです。linear・radial・conicの3タイプに対応し、プリセットからの選択、カラーストップの追加・ドラッグ編集、アニメーション設定、モックアップでの確認まで一画面で行えます。

コピペで使えるCSSグラデーション例

そのままbackgroundプロパティに指定できる基本パターンです。

方向を角度で指定

background: linear-gradient(45deg, #3b82f6, #8b5cf6); 角度は0degが下から上、90degが左から右です。to right（左→右）、to bottom right（左上→右下）のようにキーワードでも指定できます。方向を省略すると上から下（初期値）になります。

複数のカラーストップ（色の位置指定）

background: linear-gradient(to right, #f59e0b 0%, #ef4444 50%, #8b5cf6 100%); 各色の後に%（またはpx）で位置を指定すると、色が切り替わる位置を細かく制御できます。位置を省略すると自動的に均等配置されます。

radialのcircleとellipseの違い

background: radial-gradient(circle, #34d399, #059669); background: radial-gradient(ellipse, #34d399, #059669); circleは要素の縦横比に関係なく常に真円として広がります。ellipse（初期値）は要素の縦横比に合わせて楕円形に広がるため、正方形以外の要素ではcircleと見た目が変わります。

繰り返しグラデーション（ストライプ）

background: repeating-linear-gradient(45deg, #e5e7eb 0px, #e5e7eb 10px, #f3f4f6 10px, #f3f4f6 20px); 同じ色の組み合わせを繰り返すことで斜めストライプなどの模様を作れます。このツールの「繰り返し（repeating）」トグルで生成したCSSも、この構文になります。

使い方

プリセット

Stripe・Instagram・Ocean・Sunsetなど8種類のプリセットからワンクリックで読み込みできます。星マークでお気に入り登録も可能です。

タイプ選択

linear（直線）、radial（放射状）、conic（円錐）の3種類からグラデーションタイプを選択します。

方向・角度

linearでは方向（角度）、conicでは開始角度と中心位置（X/Y）を数値で指定します。

カラーストップバー

グラデーションバー上をクリックして色を追加、ハンドルをドラッグして位置を調整できます。最大5色まで設定可能です。

色設定

カラーピッカーで色を選択し、位置（%）を数値で指定します。不要な色は削除ボタンで除去できます。

詳細設定

繰り返し（repeating）の有効化、radialタイプの形状（circle/ellipse）や中心位置の変更ができます。

アニメーション

グラデーションのアニメーションを有効化し、速度（秒）と方向（normal/reverse/alternate）を設定できます。

プレビュー

設定したグラデーションをリアルタイムで大きなプレビュー領域に表示します。

モックアップ

ボタン・カード・Heroセクションの3種類のモックアップでグラデーションの実際の見え方を確認できます。

CSS出力・コピー

生成されたCSSコードを表示し、コピーボタンでクリップボードにコピーできます。アニメーション有効時はkeyframesも含めて出力されます。

よくある質問

このツールは無料ですか？

はい、無料です。登録も不要です。

データはサーバーに送信されますか？

いいえ、すべての処理はブラウザ内で完結します。入力データが外部に送信されることはありません。

生成したCSSはどこで使えますか？

生成されたCSSコードはbackground: linear-gradient(...)などの形式で表示されます。コピーボタンでコピーし、CSSファイルやスタイル属性に貼り付けて使用できます。

グラデーションの方向は変更できますか？

はい、linearタイプでは角度（度数）で方向を指定できます。conicタイプでは開始角度と中心位置（X/Y）も設定可能です。

対応しているグラデーションの種類は何ですか？

linear（直線）、radial（放射状）、conic（円錐）の3種類に対応しています。