グラデーションCSSジェネレーター

グラデーション色の背景を作るためのCSSコードを生成します。
リアルタイムに反映されるプレビューを見ながら、直感的な操作でカスタマイズ可能。
linear-gradient、radial-gradient、conic-gradientの3タイプから選択して作成可能です。
出力されるCSSコードをコピペで簡単に使えます。

スポンサーリンク

豊富なデザインテンプレートから好きなものを選択してカスタマイズ可能です。
（※現在のカスタマイズ状況はリセットされます。）

カスタマイズ

・タイプ

deg

カラー設定

  • クリックした位置に新規カラーを追加
  • ツマミを左右にドラッグ&ドロップで位置調整
▼

単位：%

▼ 選択中のカラーを編集

・一覧表示

  • %

    #22d3ee

  • %

    #8b5cf6

※

OKLCHはグラデーション（特に反対色の間）を鮮やかに表現できますが、古いブラウザではサポートされていません。

詳細設定

CSSコード

.gradation {
  background-image: linear-gradient(90deg, #22d3ee, #8b5cf6);
}

使用上の注意

  • 当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。

\ Share on SNS /

スポンサーリンク

ツール一覧

CSSジェネレーター

UI・パーツジェネレーター

HTML変換ツール

画像ジェネレーター