ツール/コード＆開発者/CSSグラデーション生成

CSSグラデーション生成

CSSグラデーションコードを生成します。

100%デバイス上 · アップロードなし

色 1

色 2

グラデーションの種類

角度: 90°

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

01 · 無制限

何度でも無料でご利用いただけます。

02 · プライベート

ファイルは端末から送信されません。すべてブラウザ内で処理されます。

03 · 高速

処理はローカルで行われ、数秒で完了します。

CSSグラデーションを作る方法

ビジュアルピッカーで2色以上を選びます。

線形と円形を切り替え、方向を回転し、色の停止点を動かします。

完成したbackgroundプロパティを取得し、スタイルシートに貼り付けます。

✓ライブプレビュー付きビジュアル編集

✓角度を完全制御できる線形・円形

✓コピペで使えるきれいなCSS出力

✓無料・即時・登録不要

どんなグラデーションに対応していますか？+

任意の角度の線形グラデーションと、中心点からの円形グラデーションです。この2つでインターフェースデザインのほぼすべてをカバーできます。

生成されるCSSはどこでも互換ですか？+

はい。標準のlinear-gradient()とradial-gradient()構文は何年も前から全ブラウザでサポートされており、プレフィックスは不要です。

グラデーションをプロっぽく見せるには？+

近い色相同士を使い（青→紫は良く、青→オレンジは避ける）、純粋な黒/白の端点を避け、真下ではなく135°のような繊細な角度を検討してください。

3色以上使えますか？+

使えます。複数のカラーストップを追加すれば朝焼けのような多色遷移も作れます。プレビューはライブ更新されます。