グラデーション生成ツール
オンラインCSSグラデーション生成ツール、線形・放射グラデーションを作成、視覚的に調整してコードをコピー
プレビュー
設定
カラーストップ
0%
100%
プリセット
CSSコード
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);CSSグラデーションとは？
CSSグラデーションは2つ以上の色の間のスムーズな移行効果です。線形グラデーションは直線方向に沿って移行し、放射グラデーションは中心点から外側に拡散します。グラデーションは背景、ボタン、カードなどの要素に使用して視覚効果を向上できます。
使用方法
- グラデーションタイプを選択：線形または放射
- カラーストップを追加し、各色の位置を調整
- 線形グラデーションは角度方向を設定、放射は中心位置を設定
- リアルタイムでグラデーション効果をプレビュー
- 「コードをコピー」をクリックしてCSSコードを取得
- プリセットを選択して一般的なグラデーションを迅速に適用
一般的な用途
- ウェブ背景：ページやセクションにグラデーション背景を追加
- ボタンスタイル：視覚的に魅力的なグラデーションボタンを作成
- カード装飾：カードにグラデーションの境界線や背景を追加
- ブランドカラー：ブランドカラーを使用してグラデーションを作成
- UIデザイン：デザイン参照用のグラデーションプロトタイプを迅速生成
よくある質問 (FAQ)
Q: 線形グラデーションと放射グラデーションの違いは？
A: 線形グラデーションは指定された角度方向に沿って色が移行；放射グラデーションは中心点から外側に拡散し、円形の拡散効果を作成します。
Q: カラーストップの位置とはどういう意味？
A: 位置のパーセンテージはグラデーション内で色が表示される場所を示し、0%が開始、100%が終了。例えば0%と50%の色は、前半部分が最初の色から2番目に移行することを意味します。
Q: 多色グラデーションを作成するには？
A: 「色を追加」をクリックしてカラーストップを追加、各色は異なる位置を持つことができ、複雑なグラデーション効果を作成できます。
Q: 生成されたCSSコードの使い方は？
A: コピー後、CSSのbackgroundまたはbackground-imageプロパティの値として使用、例：.element { background: linear-gradient(...); }