CSSグラデーションジェネレーターの使い方
グラデーションの種類を選ぶ — リニア（直線）・放射状・コニック（扇形）の3種類から選択できます。
リニアグラデーションは角度スライダーで方向を指定します。0°は下から上、90°は左から右、135°は斜め方向です。
放射状グラデーションは形状（円形・楕円形）と中心位置（9マスのグリッドで選択）を指定します。
コニックグラデーションは開始角度を指定します。色が時計回りに扇状に広がります。
カラーストップはカラースウォッチをクリックしてカラーピッカーを開くか、HEXコードを直接入力して設定します。位置スライダーで各色の開始位置（0〜100%）を調整できます。最大5つまで追加可能、×ボタンで削除できます（最低2つは必須）。
プリセットをクリックするとすぐに適用されます。夕焼け・海・森林・ネオン・桜・抹茶など12種類以上を収録。
ランダム生成ボタンで予想外の美しいグラデーションが生成されます。インスピレーション探しに最適です。
CSSをコピーボタンを押すと、-webkit- プレフィックス付きのCSSコードをクリップボードにコピーします。そのままHTMLやCSSファイルに貼り付けるだけで使えます。
CSSグラデーション構文リファレンス
リニアグラデーションの基本構文：
放射状グラデーションの基本構文：
コニックグラデーションの基本構文：
複数のカラーストップを使うことで、虹色・三色旗・グラデーションボーダーなど多彩な表現が可能になります。ストップ位置を同じ値に設定すると、ぼかしのない鮮明な色の境界線を作れます。
デザイン業務の会計管理にはfreee デザイン制作をしている方、経費精算もfreeeで一括管理しませんか？ freeeを無料で試す
関連ツール
Box Shadow Generator → Box Shadow Generatorツール Css Animation Generator → Css Animation Generatorツール Css Button Generator → Css Button Generatorツール