Toolypet
Back to Blog
CSS

CSSグラデーション基礎:Linear、Radial、Conic完全ガイド

CSSグラデーションの3つのタイプを理解し、美しい背景を作る方法を学びます。

Toolypet Team1 min read
CSSグラデーション基礎:Linear、Radial、Conic完全ガイド

CSSグラデーションの世界へようこそ

ウェブデザインの歴史において、グラデーションほど劇的な変化をもたらした技術も珍しいでしょう。かつてはPhotoshopで画像を作成して背景として使用しなければならなかった美しい色の変化効果を、今ではたった一行のCSSコードで実現できるようになりました。CSSグラデーションは、2つ以上の色の間で滑らかな変化を生み出す強力な機能であり、現代のウェブデザインに欠かせない必須ツールとなっています。

グラデーションの最大の利点はパフォーマンスです。画像ファイルを使用すると追加のHTTPリクエストが発生し、ファイルサイズ分だけ読み込み時間が増えますが、CSSグラデーションはブラウザがリアルタイムでレンダリングするため、ファイルサイズは実質的にゼロに近いです。また、どの解像度でも完璧に鮮明に表示されるため、Retinaディスプレイの時代にさらに輝きを放ちます。

3つのグラデーションタイプの特徴と活用

CSSでは3種類のグラデーションを提供しています。それぞれの特性を理解すれば、状況に合った最適な効果を選択できます。

Linear Gradient:直線の優雅さ

線形グラデーションは最も広く使用されている形式です。名前の通り、直線方向に色が滑らかに変化し、ボタン、背景、オーバーレイなど様々な要素に適用できます。

background: linear-gradient(90deg, #667eea, #764ba2);

角度を指定する際、0degは下から上へ、90degは左から右へ色が変化します。直感的に理解しにくい場合は、to right、to bottom、to top left のような方向キーワードを使用しても構いません。個人的には135degの角度をよく使用します。左上から右下へ流れる斜めのグラデーションが自然でありながらも躍動的な印象を与えるからです。

Radial Gradient:中心から広がる光

円形グラデーションは、まるでスポットライトのように中心点から外側へ色が広がります。背景に奥行きを加えたい時や、ボタンに押された効果を与えたい時に特に有用です。

background: radial-gradient(circle at center, #667eea, #764ba2);

circle は完全な円形を、ellipse は要素の比率に合った楕円形を作ります。中心点の位置も自由に指定でき、at top left で左上から光が当たる効果を演出したり、at 30% 70% のように正確な座標を指定することもできます。

Conic Gradient:回転する色彩の饗宴

円錐形グラデーションはCSSで最も後に追加されたタイプで、中心点を基準に時計回りに回転しながら色が変化します。最初は馴染みがないかもしれませんが、この特性を理解すれば、パイチャートやカラーホイールのような効果を純粋なCSSだけで実装できます。

background: conic-gradient(from 0deg, red, yellow, green, blue, red);

開始色と終了色を同じに指定すると、滑らかにつながる円形グラデーションを作ることができます。この技法でローディングスピナーや進捗インジケーターも作れるので、覚えておくと様々な場面で役立ちます。

Color Stopで繊細にコントロールする

基本的にグラデーションの色は均等に分配されます。しかし、時には特定の色がより広い領域を占めたり、急激な変化が必要な場合があります。そんな時、Color Stopを使用すると各色の位置を精密に制御できます。

background: linear-gradient(
  90deg,
  #667eea 0%,
  #667eea 30%,
  #764ba2 70%,
  #f97316 100%
);

上の例では、最初の色は0%から30%まで維持され、その後から2番目の色へ変化します。同じ色を連続で指定すると、その区間では色の変化なく単色で維持されます。この技法を活用すれば、ハードエッジグラデーション(色が急激に変わる効果)も実装できます。

実践ですぐに使える例

理論を学んだので、実際に活用してみましょう。最もよく使われる2つのパターンを紹介します。

洗練されたグラデーションボタン

フラットデザインが主流の今でも、グラデーションボタンは依然として愛されています。CTA(Call-to-Action)ボタンのようにユーザーの視線を引く必要がある要素に特に効果的です。

.gradient-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.gradient-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}

hover効果で少し上に浮かぶようなアニメーションと影を追加すると、ボタンが生き生きと動いているように感じられます。

目を引くテキストグラデーション

ヒーローセクションのタイトルやブランドロゴにグラデーションを適用すると、強烈な印象を与えることができます。少しのトリックが必要ですが、結果は印象的です。

.gradient-text {
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

背景をテキスト領域にのみクリッピングし、テキストの色を透明にする方式です。すべてのモダンブラウザで正常に動作し、特に大きな見出しに適用した時に効果が最大化されます。

まとめ

CSSグラデーションはシンプルに見えますが、無限の可能性を秘めています。今日学んだ3つのタイプの基本概念をしっかり理解すれば、組み合わせと応用を通じてどんなデザインでも実現できます。ToolypetのGradient Generatorを活用すれば、複雑な構文を覚えなくてもリアルタイムで結果を確認しながら望みのグラデーションを作れますので、ぜひ一度使ってみてください。

次の記事では、グラデーションにアニメーションを適用してより躍動的な効果を作る方法を扱います。背景が生き生きと動くウェブサイト、楽しみではありませんか?

CSSGradientBackgroundDesign
Back to all posts