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

2026年3月12日

直感的な操作で美しいグラデーションを作成できます。
作成した色はCSSコードとしてコピーしたり、画像素材としてダウンロード保存が可能です。

このツールは …回使われています。

background: linear-gradient(90deg, ...);

Presets

Type

Angle: 90deg

Color Stops

CSSコードの使い方

コピーしたコードは、適用したい要素のCSSに貼り付けて使用します。

例：ボタンに適用する場合

.my-button {
  /* ここに貼り付け */
  background: linear-gradient(90deg, #56CCF2, #2F80ED);

  /* その他のスタイル */
  color: white;
  border: none;
  font-family: inherit;
}

※ background-image プロパティとしても使用可能です。

グラデーション作成のコツ

💡

同系色でまとめる
青と水色、赤とオレンジなど、色相が近い色同士を組み合わせると、自然で美しいグラデーションになります。

📐

角度を意識する
Webサイトの背景なら「135deg（左上から右下）」や「180deg（上から下）」が一般的で使いやすい角度です。

✨

3色以上は慎重に
色が多すぎると濁って見えることがあります。初心者はまず「2色」から始めるのがおすすめです。

ご利用にあたっては、本Webアプリの利用規約も合わせてご確認ください。

バグや表示の乱れなどがあれば、こちらよりお知らせください。

便利ツール一覧

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！