グラデーション作成
線形・円形・扇形のCSSグラデーションを作ってコピー
色・デザイン無料・登録不要端末の中で処理PR・このページには広告が含まれます
位置は小さい順に並べ替えてコードにします。角度は 0deg が下から上、90deg が左から右です。conic-gradient は最近のブラウザ（Chrome・Safari・Firefox・Edge）で使えます。
グラデーション作成の使い方
- 見本から近いものを選ぶか、「種類」で線形・円形・扇形を選びます。
- 「色1」「色2」…の色と位置を決めます。「色を追加（最大5色）」で色を増やせます。
- 線形・扇形は「角度」で向きを変え、プレビューで確かめます。
- 「CSSをコピー」でコードをコピーして、スタイルシートに貼ります。
よくある質問
Q. 角度はどの向きが0度ですか？
A. 線形グラデーションの0degは下から上に向かう向きで、90degが左から右、180degが上から下です。
Q. 半透明のグラデーションは作れますか？
A. 作れます。色ごとの「不透明度」を100未満にすると、rgba() の色でコードを出します。
Q. 古いブラウザでも表示されますか？
A. linear-gradient と radial-gradient は主要なブラウザすべてで使えます。conic-gradient は比較的新しいブラウザが必要です。
このツールについて
グラデーション作成の無料ツール。線形・円形・扇形のCSSグラデーションを作ってコピー。登録不要で、入力した内容はブラウザの中だけで処理します。
最終更新：2026/10/19