CSSグラデーション生成ツール

2色以上のカラーコードから linear-gradient を生成し、方向やカラーストップを調整して `background` にそのまま使えるCSSを作成できます。

Preview

プレビューとトラックで調整し、CSSをそのままコピーできます。

background: linear-gradient(to right, #ff6b6b 0%, #feca57 50%, #48dbfb 100%);

Direction

8方向からプレビューのグラデーション方向を選択できます。

right

Color Stops

ストップ追加、削除、プリセット適用、位置の数値調整ができます。

CSSグラデーションとは？

CSSグラデーションは、画像を用意せずに色の連続的な変化を背景として表現できる機能です。 `linear-gradient()` を使うと、開始色から終了色までを滑らかにつなげ、方向や色の分岐点を細かく指定できます。ボタン、ヒーローセクション、カード背景などに適用すると、軽量なまま視覚的な立体感や奥行きを演出しやすくなります。デザイン調整をコードだけで完結できる点も大きな利点です。

このツールでできること

8方向（上、右上、右、右下、下、左下、左、左上）の切り替え
2色以上の複数カラーストップ編集
ツマミをドラッグする直感的な位置調整
HEX柔軟入力（#fff / fff / #ffffff / ffffff）

linear-gradient の基本構文

background: linear-gradient(to right, #ff6b6b 0%, #feca57 100%);

background: linear-gradient(to bottom, #36d1dc 0%, #5b86e5 50%, #b06ab3 100%);

background: linear-gradient(to top left, #11998e 10%, #38ef7d 60%, #f9f871 100%);

CSSグラデーションの使い方（初心者向け）

生成したCSSは要素の `background` に貼り付けるだけで使えます。例として、カード要素に適用する場合は次のように記述します。

.card {
  background: linear-gradient(to right, #ff6b6b 0%, #feca57 100%);
}

よくある質問（FAQ）

このツールで何ができますか？

2色以上のカラーコードを使って linear-gradient を生成できます。方向切り替え、複数ストップの位置調整、CSSのコピーに対応しています。

HEX入力は # なしでも使えますか？

使えます。ffffff / fff / #fff / #ffffff を受け付け、確定時に #rrggbb 形式へ自動で正規化します。

作成したグラデーションを画像で保存できますか？

このページはCSS生成専用です。PNGなどの画像書き出しには対応していません。