グラデーション生成

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

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

使い方

プリセット

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も含めて出力されます。