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

タイプ・角度・色をスライダーで調整。10種のプリセットからも選べます

グラデーションタイプ
グラデーションの角度135°
方向クイック選択
#3b82f6
位置0 %
#8b5cf6
位置100 %

プリセット

background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

使い方

  1. カラーストップの色と位置スライダーを動かして、グラデーションの色を設定しよう
  2. 角度スライダー(または方向ボタン)でグラデーションの向きを変えよう
  3. 「📋 CSSをコピー」ボタンでコードをコピーして自分のスタイルシートに貼り付けよう!まずはプリセットから試してみるのもおすすめ

グラデーションについてもっと学ぼう

関連ツール

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ