CSSグラデーションジェネレーター
線形および放射状のCSSグラデーションを作成します。視覚的に色を選び、生成されたCSSをコピーできます。
background: linear-gradient(135deg, #535beb, #7c3aed);
CSSグラデーションジェネレーターとは何ですか？
CSSグラデーションは、2色以上の間の色の遷移です。線形グラデーションは一方向に流れ、放射状グラデーションは一点から放射状に広がります。このジェネレーターは一般的なケースをカバーします。位置を細かく指定する複雑な複数ストップのグラデーションについては、手動で作成してください。
よくある質問
グラデーションは効率的ですか？▼
はい。グラデーション画像よりもはるかに低コストです。品質を損なうことなく任意のサイズに拡大縮小できます。
グラデーションをアニメーションさせることはできますか？▼
グラデーションを直接アニメーションさせることはサポートされていません。JavaScriptを使ってグラデーションのプロパティをアニメーションさせるか、background-positionを使ったテクニックを利用してください。
関連ツール
カラー変換ツール（HEX/RGB/HSL）
色をHEX、RGB、HSLの各形式間で変換します。視覚的に色を選ぶことも、値を手動で入力することもできます。
CSS box-shadowジェネレーター
CSSのbox-shadow値を視覚的に作成します。リアルタイムでプレビューし、生成されたCSSをコピーできます。
cubic-bezierイージングカーブジェネレーター
CSS用のcubic-bezierイージングカーブを作成します。標準のプリセットも含まれています。
カラーパレットジェネレーター
任意のベースカラーから調和のとれたカラーパレットを生成します。補色、類似色、トライアド、モノクロマティックの各配色に対応しています。
CSS border-radiusジェネレーター
複雑なCSSのborder-radius値を視覚的に作成します。各コーナーを個別にコントロールできます。
CSS clamp()ジェネレーター
clamp()を使って、流動的でレスポンシブなCSSの値を生成します。ビューポートの範囲全体にわたり、最小サイズと最大サイズの間をなめらかにスケーリングします。