moldspoon

🌈 CSSグラデーションメーカー

グラデーションの種類

Linear
線形
Radial
円形
Conic
円錐形

角度（0〜360°）

0
360

方向プリセット

↑ 上
↗ 右上
→ 右
↘ 右下
↓ 下
↙ 左下
← 左
↖ 左上

カラーストップ

バーの下にあるハンドルをクリックで選択、ドラッグで位置を移動できます。

%
%

プレビュー

プリセット

🌅 サンセット
🌊 オーシャン
💜 パープルラブ
🍑 ピーチ
🥭 マンゴー
🌲 フォレスト
🌌 コズミック
☁️ スカイ
👑 ロイヤル
🔥 ファイア

CSSコード

プレフィックスなし
ベンダープレフィックス付き
✅ コピーしました！

選択中のストップ: #ff6b6b / 0%

※ 入力内容はすべてブラウザ内で処理しており、弊社サーバーへ送信・保存することは一切ありません。

linear・radial・conicの3種類のグラデーションを、プレビューを見ながら作成できるツールです。カラーストップを自由に追加・編集して、CSSコードをそのままコピーできます。

こんなツールをこれからも作っていきます。もしこれは！と思っていただけましたら、シェア・応援していただけると嬉しいです！😀

X (旧Twitter)

0

Facebook

LINE

0

はてブ

リンクコピー

✅ コピーしました！

よくある質問

どんな種類のグラデーションが作れますか？

linear（直線）・radial（円形）・conic（円錐）の3種類に対応しています。方向や中心位置も調整できます。

3色以上のグラデーションは作れますか？

作れます。カラーストップを追加すれば何色でも重ねられ、それぞれの色と位置を個別に指定できます。ストップは2つまで減らせます。

作ったグラデーションはどう使いますか？

画面に表示されるCSSコードをコピーして、background や background-image の値として貼り付けます。

会員登録は必要ですか？

不要です。無料でそのまま使えます。