開発者 / CSS
CSSグラデーションジェネレーター
ライブプレビューで線形、放射状、円錐グラデーションをデザインし、必要な数のカラーストップやプリセットを使ってCSSをコピーできます。
CSSグラデーションジェネレーター: このジェネレーターは、表示中のグラデーションに必要なbackground宣言を作成します。角度を指定したlinear-gradient、中心から円または楕円状に広がるradial-gradient、開始角度から円を描くように色が変化するconic-gradientのいずれかを使い、カラーストップを順番に指定します。グラデーションを描画できない古いブラウザ向けのフォールバックとして、最初に単色を指定します。新しい色を追加すると、最も広い間隔に隣り合う色を混ぜて挿入されるため、グラデーションが不自然に途切れません。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
1行目は非常に古いブラウザ用の単色です。現在のすべてのブラウザでは、2行目のグラデーションが使われます。
プリセット
なめらかに見えるグラデーション
青から黄色のように大きく異なる2色を混ぜると、中央でくすんだ灰色を通ります。途中に明るい色のカラーストップを追加すると、鮮やかさを保てます。オレンジからピンクのように隣り合う色相のグラデーションでは、通常その必要はありません。
カラーピッカーで色を選んだり確認したりし、ボックスシャドウジェネレーターでカードに奥行きを加えてください。
グラデーション上のテキスト
中央だけでなく、グラデーションの両端でもテキストが読みやすいことを確認してください。白いテキストには暗めのグラデーションを、暗いテキストには背後に控えめなグラデーションを使うほうが、明るいレインボー配色より安全です。
使い方
- プリセットを選ぶか、線形、放射状、円錐のいずれかを選択します。
- 角度を設定し、色と位置を調整します。カラーストップを増やすには色を追加します。
- CSSをスタイルシートにコピーします。
プライバシーと制限事項
すべての処理はブラウザ内で行われます。最後に作成したグラデーションは、このブラウザにのみ保存されます。
関連ツール
よくある質問
線形グラデーションの角度にはどのような意味がありますか？
0degは下から上、90degは左から右、180degは上から下、270degは右から左に進みます。グラデーションはその方向に沿って描画されるため、135degでは左上から右下に向かって進みます。
カラーストップとは何ですか？
グラデーション上の0%から100%までの位置と、その位置に到達したときの色を指定するものです。2つのストップの間では色が混ざります。同じ位置に2つのストップを置くと、色が混ざらず境界がくっきりします。これを利用して縞模様を作れます。
円錐グラデーションは放射状グラデーションとどう違いますか？
放射状グラデーションは中心から外側へ、輪状に色が変化します。円錐グラデーションは時計の針のように中心の周囲を回りながら色が変化するため、カラーホイールや円グラフに適しています。
今でも-webkit-接頭辞は必要ですか？
いいえ。現在のすべてのブラウザが接頭辞なしのlinear-gradientとradial-gradientに対応しており、conic-gradientも2021年以降はすべてのブラウザで動作しています。1行目のフォールバックカラーは、かなり古いブラウザ向けにのみ指定されています。
無料ツール · ブラウザ内で · アカウント不要