開発・Web
CSS グラデーションの作り方
ページ、カード、スライドの背景にグラデーションを入れたいのに、CSS を試行錯誤で書くのは時間がかかります。種類を選んで色を配置し、そのまま貼り付けられる CSS をコピーするか、画像として保存する方法を説明します。すべてブラウザの中で動きます。
グラデーションの上の文字は、両端のどちらでも読める必要があります。使う予定の文字色で、いちばん明るい色と暗い色を試してください。
CSS グラデーション ジェネレーターを開くこの一回
グラデーションの種類を選ぶ
「線形」は直線状に色が混ざり、たいていの背景に合います。「円形」は中心から広がり、やわらかい光のように見えます。「扇形」は 1 点の周りを回り、色相環や円グラフのようになります。
3 つの種類の違いは、色がたどる経路です。 cv.cm の CSS グラデーション ジェネレーターを開く
「グラデーション」で種類を選びます。出発点にはプリセットを、アイデアがほしいときは「ランダム」を押してください。プレビューはすぐに更新されます。
CSS グラデーション ジェネレーターを開く方向を決める
線形と扇形では「角度」をドラッグします。0° は上、90° は右、180° は下を指します。円形では代わりに「円」か「楕円」を選びます。
色を配置する
各色には 0% から 100% までの位置があり、6 色まで使えます。「色を追加」で 1 色増やし、× で削除します。位置が近いとくっきりした境目になり、離れているとやわらかく混ざります。
各色は線上の位置に置かれ、CSS にはその順に並びます。 CSS をコピーする
「CSS をコピー」を押すと 2 行が手に入ります。とても古いブラウザ向けの単色と、グラデーションです。要素の CSS ルールに貼り付けてください。body やカードなど、サイズのあるブロックならどれでも使えます。
または PNG を保存する
スライドや壁紙には、「画像サイズ」を選んで「PNG を保存」を押します。サイズには 1920 × 1080、2560 × 1440、スマホ向けの 1080 × 1920、正方形の投稿向けの 1080 × 1080 があります。
よくある質問
ページにグラデーションが表示されないのはなぜですか？
おそらく要素に高さがありません。グラデーションは要素のボックスを塗るので、空のブロックでは高さが 0 になります。高さか内容を与えてください。ページ全体なら html と body の height を 100% にします。
CSS に background の行が 2 つあるのはなぜですか？
1 行目が単色で、2 行目がグラデーションです。グラデーションを描けないブラウザはその行を無視し、単色を使います。
background と background-image のどちらがいいですか？
グラデーションは画像として扱われるので、どちらでも動きます。background のほうが短く、他の背景の設定もリセットします。他の背景に重ねるなら background-image を使ってください。
くっきりした色の縞を作るにはどうすればいいですか？
2 色を同じ位置に置きます。たとえばどちらも 50% にします。混ざる余地がなくなるので、くっきりした線で色が変わります。
PNG に縞模様が出るのはなぜですか？
PNG は色のチャンネルごとに 256 段階で保存するので、似た色どうしのとても広いグラデーションでは、かすかな段差が見えることがあります。もっと離れた色を使うか、画像編集ソフトでわずかなテクスチャを加えてください。