CSSだけで色をなめらかに変える
CSSグラデーションは、画像を使わずにCSSだけで色のなめらかな変化を表現する方法です。背景、ボタン、見出し、囲み枠、ヒーローエリアなど、Webデザインのさまざまな場面で使われます。
CSSグラデーションギャラリー
おしゃれなCSSグラデーションを一覧から選んで、そのままコピーできます。
色や角度を調整して、自分好みのグラデーションを作ることもできます。
作成したCSSはブラウザ上でプレビュー・コピーできます。
入力内容がサーバーに送信・保存されることはありません。
グラデーション一覧
タブで雰囲気を切り替えて、好きなグラデーションを選べます。
グラデーション設定
色、位置、角度を変えると、右のプレビューとCSSにすぐ反映されます。
色の位置
種類
使う前のチェック
- グラデーションCSSや編集内容はサーバーに送信・保存されません。
- 作成したグラデーションCSSは、ブラウザ上でプレビューしてコピーできます。
- 文字を重ねる場合は、背景とのコントラストも確認してください。
CSSグラデーションとは？
linear-gradient
一直線に色が変化するグラデーションです。最もよく使われ、角度を変えるだけでも印象が大きく変わります。
background: linear-gradient(135deg, #ff4ecd 0%, #00c2ff 100%);radial-gradient
中心から外側に向かって広がるグラデーションです。光、ぼかし、やわらかい背景表現に向いています。
background: radial-gradient(circle, #ffffff 0%, #7dd3fc 100%);カラーストップとは？
グラデーションの中で「どの色をどの位置に置くか」を指定するものです。0%、50%、100%のように指定すると、色の変化のタイミングを調整できます。
きれいに作るコツ
- 色数を増やしすぎない
- 近い色でつなぐと自然に見えやすい
- ビビッドな色はアクセントとして使う
- ピンク×青、青×紫、オレンジ×金など相性の良い組み合わせを使う