conic-gradient(色1, 色2); で円錐状のグラデーションを時計回りに指定することができます。

<p>タグのボックスで使用例を挙げてみます。

【ブラウザ表示】

最初に青色、次に緑色になっています。

<p class="ensui">最初に青色、次に緑色になっています。</p>

p.ensui{
width:200px;
height:200px;
background:conic-gradient(blue, green);
}

<p style="width:200px; height:200px; background:conic-gradient(blue, green);">最初に青色、次に緑色になっています。</p>

■ 色の範囲を指定する

conic-gradient(色1 値,色2 値);で開始地点を0%（青と黄色の境界線）から終了地点100%（0%と同じ地点）までの間で色の範囲を指定できます。 下の例では0％～25％までは青、25％～50％までは青から緑、50％～75％は緑から黄色の3色となります。

【ブラウザ表示】

3色

<p class="ensui2">3色</p>

p.ensui2{
width:200px;
height:200px;
background:conic-gradient(blue 25%, green 50%, yellow 75%);
}

<p style="width:200px; height:200px; background:conic-gradient(blue 25%, green 50%, yellow 75%);">3色</p>

■ 色相、彩度、輝度を成分で色を指定する

conic-gradient(hsl(数値, 値1, 値2),hsl(数値, 値1, 値2));で色相、彩度、輝度を成分で色を指定することもできます。 下の例ではhsl関数で色相（0～360度）が140、彩度が70％、輝度50％で二つ目は色相が260、彩度が50％、輝度50％です。

【ブラウザ表示】

成分で色を指定

<p class="ensui3">成分で色を指定</p>

p.ensui3{
width:200px;
height:200px;
background:conic-gradient(
hsl(140, 70%, 50%),
hsl(260, 50%, 50%)
);
}

<p style="width:200px; height:200px; background:conic-gradient( hsl(140, 70%, 50%), hsl(260, 50%, 50%) );">成分で色を指定</p>

■ 中心位置を指定する

conic-gradient(at 中心位置, 色1, 色2);で中心位置を指定することができます。 中心位置は%やピクセルで指定した方が微調整できます。

【ブラウザ表示】

右上の角

<p class="ensui4">右上の角</p>

p.ensui4{
width:200px;
height:200px;
background:conic-gradient(at top right, blue, yellow);
}

<p style="width:200px; height:200px; background:conic-gradient(at top right, blue, yellow);">右上の角</p>

■ 円錐、線形グラデーションを組み合わせる

下の例では 繰り返しの円錐、線形グラデーションを組み合わせbackground-blend-mode:multiply;を指定し色を掛け合わせることで真上から見たようなピラミッド型のグラデーションを表示できます。

【ブラウザ表示】

ピラミッド

<p class="ensui5">ピラミッド</p>

p.ensui5{
width:200px;
height:200px;
background:repeating-conic-gradient(#BB8B38 45deg, orange 90deg, green 135deg, #BB8B38 180deg),
repeating-linear-gradient(0deg, white 1px 2px, #BB8B38 3px 4px),
repeating-linear-gradient(90deg, white 1px 2px, #BB8B38 3px 4px);
background-blend-mode:multiply;
}

<p style="width:200px; height:200px; background:repeating-conic-gradient(#BB8B38 45deg, orange 90deg, green 135deg, #BB8B38 180deg), repeating-linear-gradient(0deg, white 1px 2px, #BB8B38 3px 4px), repeating-linear-gradient(90deg, white 1px 2px, #BB8B38 3px 4px); background-blend-mode:multiply;">ピラミッド</p>

■ その他の項目

スタイルシート一覧のページに戻る