無料・登録不要
CSSグラデーションジェネレーター
美しいグラデーションを視覚的に作成
美しいグラデーションを視覚的に作成
CSSグラデーションを視覚的に作成できる無料ツールです。リニア・ラジアル・コニックの3タイプに対応。カラーピッカーで直感的に色を選び、角度や位置を調整するだけでCSSコードが自動生成されます。
linear/radial/conic グラデーションを作成
設定変更が即座にプレビューに反映
ワンクリックでCSSコードをコピー
ヒーローセクションの背景をグラデーションにしたいとき
プリセットとカラーピッカーで理想の配色を素早く作成
CSSグラデーションの構文を手書きするのが面倒なとき
GUIで調整してコードをそのままコピー
ボタンやカードに微妙なグラデーションを適用したいとき
リアルタイムプレビューで色の組み合わせを即確認
linear、radial、conicからグラデーションの種類を選びます。
カラーピッカーで色を選び、ストップ位置を調整します。
グラデーションの角度や中心位置を調整します。
プレビューを確認し、生成されたCSSコードをコピーします。