放射状および円錐曲線のグラデーションへの深いCSSダイブ

CSSグラデーションは便利なCSS機能であり、興味深いUI効果を作成したり、HTML要素を作成せずに何かを描画したりするのに役立ちます。 この記事で焦点を当てたい2つconic-gradientとradial-gradientです。 それぞれの動作は異なります（円錐のグラデーションは曲線ですが、放射状のグラデーションは直線です）。

従うために、 radial-gradientまたはconic-gradientグラデーションのどちらかについて知る必要はありません。 私はそれらをうまく説明するために最善を尽くします。

飛び込みましょう！

• 放射状勾配とは何ですか？
  • 最も基本的な例
  • 放射状グラデーションはどのように機能しますか？
• 円錐曲線とは何ですか？
• 放射状グラデーションのユースケース
  • ヒーローセクションのradial-gradient
  • 点線のパターン効果
  • 画像効果
• 円錐曲線の使用例
  • 円グラフ
  • 背景とパターン
  • UIパターン
  • @propertyを使用した円錐曲線のアニメーション
  • カスタム形状でコーナーをカット
  • 円錐曲線
  • セクションの背景

放射状勾配とは何ですか？

その名前から、 radial-gradientは、円や楕円などの放射状要素を描画する機能を提供します。

最も基本的な構文を見てみましょう。

最も基本的な例

この例では、2つのカラーストップを持つradial-gradientがあります。 これにより、楕円形のグラデーションが作成されました。

 .element { background: radial-gradient(#9c27b0, #ff9800); }

上記は、CSSで実行できる最も基本的なradial-gradientです。 不思議に思うかもしれませんが、なぜデフォルトで楕円になっているのですか？ さて、説明させてください。

グラデーション（円または楕円）に形状名が定義されていない場合、次の場合にデフォルトで楕円になります。

• サイズは決定されていません。
• または、2つの値（幅と高さ）があります。

放射状グラデーションはどのように機能しますか？

さまざまなキーワードや追加をインクリメントすることでグラデーションがどのように機能するかを示す一連のビジュアルを見ていきます。

まず、最初の例に戻りましょう。

 .element { background: radial-gradient(#9c27b0, #ff9800); }

形状を識別せずに2つの色がある場合、グラデーションはデフォルトで楕円になります。

楕円は、コンテナの幅と高さを埋めています。 ブラウザは開始点と停止点をそれぞれ0%と100%と想定しているため、ぼやけて見えます。

ブラウザがグラデーションを認識する方法は次のとおりです。

 .element { background: radial-gradient(#9c27b0 0%, #ff9800 100%); }

最初のカラーストップの前にcircleを追加すると、次のようになります。

 .element { background: radial-gradient(circle, #9c27b0, #ff9800); }

円と楕円がデフォルトでどのように表示されるかがわかったので、ポジショニングに取り掛かりましょう。

デフォルトでは、両方ともコンテナ内で水平方向と垂直方向の中央に配置されます。 言い換えれば、 50% 50%で：

ここで重要なのは、配置が円または楕円の中心から行われることです。したがって、 top leftに円を配置します。配置されるのは中心点です。

いくつかの例を詳しく見てみましょう。

 .element { background: radial-gradient(circle at top left, #9c27b0, #ff9800); }

右側の中央に配置することもできます。 rightのみを追加すると、円がright 50%の中央に配置されます。

 .element { background: radial-gradient(circle at right, #9c27b0, #ff9800); }

外観は次のとおりです。

円錐曲線とは何ですか？

conic-gradient() CSS関数は、要素の中心を中心に回転するグラデーションを作成します。 基本的な例を見てみましょう。

 .element { background: conic-gradient(#9c27b0, #ff9800); }

要素の中心点からグラデーションがどのように始まるかを見てください。 デフォルトでは0degから360度まで回転します。

最初の色にハードストップ値を追加するとどうなるか見てみましょう。

 .element { background: conic-gradient(#9c27b0 50%, #ff9800); }

これで、最初の色が要素の50%を占め、2番目の色が100%まで徐々に表示されます。

2番目の色にもハードストップを適用するとどうなりますか？ 以下のスニペットでは、最初の色が要素の50%を塗りつぶし、2番目の色が50%から最後（ 100% ）まで塗りつぶされます。

 .element { background: conic-gradient(#9c27b0 50%, #ff9800 0); }

最初のカラーストップ値を増やすと、角度の付いた塗りつぶしが作成されます。

 .element { background: conic-gradient(#9c27b0 65%, #ff9800 0); }

それだけでなく、以下に示すように、CSS関数repeating-conic-gradient()を使用して繰り返しグラデーションを作成することもできます。

 .element { background: repeating-conic-gradient( #9c27b0 0 15deg, #ff9800 15deg 30deg ); }

上記のスニペットは、最初の色を0degから15度まで15deg 、次に2番目の色を30deg 15deg 。 繰り返すと、次の図のようになります。

放射状グラデーションのユースケース

多くの場合、背景としてイラストやパターンを追加する必要があります。 もちろん、見出しや二次的なテキストがある場合、それらを読むのは難しいかもしれません。

ヒーローセクションのradial-gradient

背景と同じ色の楕円グラデーションを使用すると、コンテンツを目立たせることができます。 次の例では、コンテンツが背景とどのように重なっているかに注目してください。 パターンを見るよりも読むことに集中するのが少し難しくなります。

そのための一般的な修正は、下の背景と同じ色の楕円を追加することです（それとブレンドするため）。

楕円の付いたヒーローセクションは次のとおりです（デモ用に灰色で表示されています）。

これをCSSに反映する方法は次のとおりです。

 .hero { background-color: #fbfafa; background-image: radial-gradient(#fbfafa, rgba(0,0,0,0) center/70% 70% no-repeat, url("hero-bg.svg"); background-position: center; background-size: 70% 70%, cover; background-repeat: no-repeat; }

そうすれば、コンテンツの下のパターンをカバーしたので、今でははるかに読みやすくなっています。

点線のパターン効果

点線のパターンの効果を作成するために、 radial-gradientを使用できます。 外観は次のとおりです。

これを実現するために、小さな円を作成すると、残りのグラデーションが透明になります。

これがそれ自体でどのように見えるかです：

このパターンが繰り返されると、次のようになります。

これをCSSに反映するには、グラデーションの幅と高さを追加する必要があります。 グラデーションはデフォルトで繰り返されるため、上記のパターンになります。

 .dot-pattern { --color-1: #9c27b0; --color-2: rgba(0,0,0,0); background-image: radial-gradient(circle at 2px 2px, var(--color-1) 1px, var(--color-2) 0); background-size: 15px 15px; }

画像効果

mix-blend-modeグラデーションを使用して、画像に興味深いUI効果を作成できます。 次の例では、円が左上隅にどのように配置されているかに注目してください。 特定の効果を達成するためにブレンドモードで遊ぶことによって、それから利益を得ることができます。

 .thumb:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top left, #9c27b0, #ff9800); mix-blend-mode: hard-light; opacity: 0.4; }

円錐曲線の使用例

円グラフ

円錐曲線のグラデーションについて考えることができる最初のユースケースは、単純な円グラフです。 昔はCSSでやりたいことでしたが、今では簡単にできます。

 .pie-chart { width: 100px; height: 100px; background: conic-gradient(from 0deg, #b2daf9 128deg, #2096f3 0); border-radius: 50%; }

背景とパターン

円錐曲線のパターンを作成する可能性はたくさんあります。 この例では、チェッカーボードのパターンに焦点を当てます。

次のグラデーションで何が起こるかを次に示します。

• #fffカラーは要素の90degをカバーしています。
• 次に、 180degまで#000が続きます。
• 次に、270度まで#fffが270degます。
• 最後に、 #000が終了角度（ 360deg ）まで充填されました。

 .checkerboard { --size: 25px; width: 200px; height: 100px; background-image: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0); background-size: var(--size) var(--size); }

繰り返してbackground-sizeで制御すると、次のようになります。

それだけでなく、いくつかの値を別の方法で回転させることで、非常に興味深い効果を実現できます。 次に例を示します。

 .element { background-image: conic-gradient(#fff 90deg, #000 0 136deg, #fff 0 313deg, #000 0); }

UIパターン

場合によっては、さまざまな形をとるランダムなUIパターンを生成する必要があります。 これを実現するためにconic-gradientを使用できます。 アイデアは、 background-sizeを介してグラデーションのサイズを制御し、次にconic-gradient角度を変更してさまざまな効果を実現することです。

幅と高さが200pxの要素があります。 この要素内で、背景を繰り返します。

 .element { --size: 20px; width: 200px; height: 200px; background-size: var(--size) var(--size); }

想像しやすいように、各背景のサイズは20pxと高さの両方で20ピクセルで、水平方向と垂直方向に繰り返されます。

これで、表示される各正方形にconic-gradientが含まれます。 今のところ、コンセプトをよりよく示すために2つの青い色合いを追加します。

 .element { --size: 20px; width: 200px; height: 200px; background: conic-gradient(#2296F3 0.13turn, rgba(255,255,255,0) 0); background-size: var(--size) var(--size); }

これは、円錐曲線のグラデーションが繰り返されることなくどのように見えるかです。

繰り返すとこんな感じ。 ここで重要なのは、2番目の色を透明にすることです。これにより、三角形になります。

角度を変えることで、パターンの形をランダム化して面白い効果を出すことができます。

@propertyを使用した円錐曲線のアニメーション

conic-gradientを使用して興味深いアニメーション効果を作成できます。 ただし、これはデフォルトでは不可能です。 @property定義を使用して、アニメーションに使用するカスタムプロパティを定義する必要があります。

 @property --conic-mask { syntax: '<percentage>'; inherits: false; initial-value: 0%; } .conic-mask { --conic-mask: 0%; -webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--conic-mask), #0000); transition: --conic-mask 1s ease-out; } .conic-mask: hover { --conic-mask: 100%; }

カスタム形状でコーナーをカット

これはTemaniAfifによるデモです。 アイデアは、 conic-gradientマスクとして使用して、カットコーナー効果を作成することです。

円錐曲線

conic-gradientを使用して、コーナーが他の色で暗いまたは明るいコーナーを持つ微妙なグラデーション効果を作成できます。 Conic.cssは、Adam Argyleによる小さなCSSライブラリであり、多くの素敵な円錐曲線を備えています。

セクションの背景に円錐曲線を使用する

これは、ScottKellumが共有するデモで見ました。 フッターに部分的な色を追加すると同時に、滑らかに見えるテクニックの仕組みが本当に気に入りました。

 .footer { background: conic-gradient(from 0.25turn at 25% 0%, #FFD9CE, rgba(#FFD9CE, 0) 50%); }

• デモをチェックしてください→

結論

これまで見てきたように、CSS radial-gradient gradient関数とconic-gradient関数を使用すると、非常に興味深い（そして便利な）UIが得られます。 ただし、それぞれをいつ使用するかについては、白黒はありません。 ほとんどの場合、それは手元のユースケースに依存します。

この記事がお役に立てば幸いです。 読んでくれてありがとう！

スマッシングマガジンのさらなる読み物

• CSSのobject-fitとbackground-size詳細
• フロントエンドプロジェクトの一般的なCSSの問題
• CSSでのHSLカラーの使用
• CSSのオーバーフローの問題