CSSのお勉強:グラデーションの基本（3）【conic-gradient】

backgroundに指定できるグラデーションの種類

グラデーションには、線形グラデーション、放射グラデーション、扇形グラデーションがあります。

こちらの記事では、扇形グラデーションについてまとめています。

CSSのお勉強:グラデーションの基本（1）【linear-gradient】

CSSでグラデーション（linear-gradient）を表示する方法を勉強してみました。

pasoviva.com

扇形グラデーション：conic-gradient

conic-gradient()は、中心点を軸に、時計回りに回転しながら円錐状のグラデーションを生成する関数です。日本語では扇形と訳されていますが、実際には円錐を真上から見た状態のグラデーションになっています。

conic=円錐

中心点の規定値はcenterで要素の真ん中ですが、任意の位置を指定することもできます。

記述方法

基本的には、異なる2色を指定すれば、領域の中心点から時計回りにグラデーションが表示されます。任意で、開始位置（角度）や中心点の位置を指定できます。

2色のみ

▼ Sample

background: conic-gradient(skyblue, pink);

複数の色を指定

▼ Sample

background: conic-gradient(skyblue, yellow, lightgreen, orange, pink);

開始位置と終了位置の指定

linear-gradientやradiul-gradientと同様に、色の開始位置と終了位置を指定することができます。

扇形グラデーションの色経由点は角度を指定します。使用する単位には「度」を表す deg、回転数を表す turn などがあります。

▼ Sample

/* カラーストップ（経由点）指定 */
    background: conic-gradient(
        skyblue 0, 
        yellow 90deg, 
        lightgreen 180deg, 
        pink 270deg);

/* 開始点と終了点を指定 */
    background: conic-gradient(
        skyblue 0 90deg, 
        yellow 90deg 180deg, 
        lightgreen 180deg 270deg, 
        pink 270deg 360deg);

border-radius: 50%; /* 要素の丸み */

開始位置（角度）の指定は [from]

「from」に続いて角度を指定すると、グラデーションの開始位置を設定できます。

▼ Sample

background: conic-gradient(from 45deg, skyblue, pink);

中心点の位置は [at]

「at」に続いてキーワード（top、bottomなど）、数値＋単位（px）、%値を入力すると、任意の場所に中心点を移すことができます。

数値と%値で指定する場合、要素の左上を基準にして、X/Y 座標を定義します。先に記述したほうが水平方向、後に記述したものが垂直方向を示します。

▼ Sample

background: conic-gradient(
    at 30px 40px, 
    skyblue 120deg, 
    yellow 120deg 240deg, 
    pink 240deg);

▼ Sample

background: conic-gradient(
    at 40% 60%, 
    skyblue 120deg, 
    yellow 120deg 240deg, 
    pink 240deg);

実践編

扇形グラデーションを生成するconic-gradientを使ったデザインです。

▼ Sample

width: 150px;
height: 150px;
background: conic-gradient(
   skyblue 60%, 
   pink 60% 85%, 
   lightgreen 85% 95%, 
   yellow 95%);
border-radius: 50%;

解説

• 経由点を利用して、円グラフ風に表示してみました。
• border-radiusを使って、ボックスを円形にしています。

▼ Sample

ドーナツ風グラフ

グラデーションを複数重ねることができる特徴を活かして作ります。

扇形グラデーション自体は上と同じですが、radial-gradientで作成した円形グラデーションを上に重ねて中心を隠し、ドーナツタイプのグラフにしています。

width: 150px;
height: 150px;
background: 
   radial-gradient(white 40%, transparent 41%),
   conic-gradient(skyblue 60%, pink 60% 85%, lightgreen 85% 95%, yellow 95%);
border-radius: 50%;
border: none;

解説

• transparentは「透明色」を指定するキーワードです。
• transparentの開始点は、1番目の色（white）の終了点と同じ値にするとギザギザしたので、1%を加えてぼかし効果にしています。

repeatingをつけて反復グラデーション

repeating-conig-gradientを使うと、扇形グラデーションを繰り返し表示することができます。