CSSグラデーションジェネレーター — ブラウザ内でグラデーションを作成
グラデーションを視覚的にデザインして、ワンクリックでCSSをコピー。
このツールは完全にブラウザ内で動作します。ファイルがアップロードされることはなく、お使いのデバイス上にとどまります。
90°
Color stops
- 0%
- 100%
結果
background: linear-gradient(90deg, #6d28d9 0%, #ec4899 100%);グラデーションの構文を手で書くのは面倒です — パーセントを1つ間違えたり単位を忘れたりするだけで、背景全体が台無しになります。このジェネレーターを使えば、グラデーションを視覚的に組み立てられます。好きなだけカラーストップを追加し、位置をドラッグして調整し、線形と放射状を切り替え、プレビューが瞬時に更新される様子を確認できます。
すべての処理はブラウザ内で完結します。サインアップもサーバーとのやり取りもインストールも不要 — 設定を変えた瞬間にお使いの端末上でCSSが生成され、そのままスタイルシートにコピーできます。
CSSグラデーションジェネレーター の使い方
- グラデーションの種類を選びます — 線形または放射状。
- 線形グラデーションの場合は、角度を度数で設定します。
- 各カラーストップを、カラーピッカーと位置スライダーで調整します。
- プレビューが思いどおりになるまで、ストップを追加・削除します。
- 「CSSをコピー」をクリックして、生成されたbackgroundルールをコピーします。
よくある質問
これはどんなCSSを生成しますか？
標準のlinear-gradient()またはradial-gradient()関数を使った単一のbackgroundプロパティを出力します。そのため、どんなスタイルシートやインラインスタイルにも直接貼り付けられます。
カラーストップはいくつ追加できますか？
必要なだけ追加できます。各ストップは独自の色と位置を持ち、追加・編集・削除に合わせてグラデーションがライブで更新されます。
角度は放射状グラデーションにも適用されますか？
いいえ。角度は線形グラデーションにのみ影響します。放射状グラデーションは中心から外側へ広がるため、放射状を選ぶと角度の操作項目は非表示になります。
何かサーバーに送信されますか？
いいえ。ツールは完全にブラウザ内で動作します。色も生成されたCSSも、端末の外に出ることはありません。