CSSグラデーション生成器
CSS線形・放射状グラデーションを作成します。
カラーストップ
0%
100%
方向
角度90deg
CSS出力
クイックプリセット
おすすめのツール
役に立つかもしれない厳選されたツール
CSSグラデーションを使いこなす
概要
ベタ塗りの背景から脱却するには、CSSグラデーションが最も簡単です。`linear-gradient`、`radial-gradient`、`conic-gradient`の3種類があり、それぞれ異なる視覚効果を生み出します。このジェネレーターは色停止位置、角度、形状を視覚的に編集し、結果をリアルタイムでプレビューします。複数の色停止、透明度、繰り返しパターンもサポートします。
仕組み
色停止点をスライダーで追加・移動・削除します。角度は0-360度、放射状の場合は中心位置を選びます。生成されたCSSは複数のフォールバック構文を含み、古いブラウザでも動作します。出力はそのままCSSにペーストできます。
こんなときに使う
ヒーローセクションの背景。ボタンの3D風効果。カードの微妙な深み追加。アバターのプレースホルダー(円錐グラデで虹色)。ローディングシマーアニメーション。ブランド色の柔らかい変化表現。
よくある質問
CSSグラデーションは画像より遥かに軽量です(数バイト vs 数百KB)。アニメーション時のみGPU負荷に注意してください。