CSSグラデーション生成ツール

リニア・ラジアルグラデーションを直感的に作成してCSSコードを生成

グラデーションタイプ

角度・方向

角度:

90°

プリセット方向:

カラーポイント

開始色

0%

終了色

100%

プリセット

サンセット

オーシャン

フォレスト

レインボー

プレビュー

CSSコード

background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%);

使い方

グラデーションタイプ（リニア・ラジアル）を選択します。
角度スライダーまたはプリセット方向ボタンで方向を調整します。
カラーピッカーで開始色・終了色を設定し、位置スライダーで位置を調整します。
「カラーポイントを追加」ボタンで中間色を追加できます。
プリセットから美しいグラデーションを素早く適用できます。
プレビューでリアルタイムに確認し、「コピー」ボタンでCSSコードを取得できます。