CSSグラデーション生成ツール
linear-gradient・radial-gradientのCSSを簡単に生成します。カラーピッカーで色を設定してリアルタイムプレビュー。
#6366f10%
#ec4899100%
生成されたCSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
CSSグラデーション生成ツールの使い方
1. グラデーションの種類（リニア・ラジアル）を選択します。
2. リニアの場合は角度、ラジアルの場合は形状を設定します。
3. カラーピッカーで色を選び、スライダーで位置を調整します。
4. 「追加」ボタンでカラーストップを最大6つまで増やせます。
5. 「コピー」ボタンでCSSコードをクリップボードにコピーできます。
おすすめサービス
Canva Pro - デザインツール
デザインプロ品質のデザインを簡単作成。テンプレート豊富で初心者にもおすすめ。
Adobe Creative Cloud
デザインPhotoshop・Illustrator等のプロ向けデザインツール。学割あり。
※ PR・広告を含みます