CSSグラデーションのまとめ

Gradient.

CSS関数のグラデーションの簡単な紹介です。

linear-gradient() / repeating-linear-gradient()

線形グラデーション

方向と色を指定してグラデーションをかけることができます。

gra1

gra11

background-image: linear-gradient(to right, rgb(126, 126, 239), rgb(203, 167, 173))

応用：複数線形画像合体

background-imageは複数の画像の設置を許しています。linear-gradient()も複数設置可能です。

Sample-gra2は角度違いの、linear-gradientを3つ記述しています。

gra2

gra12

background-image:
 linear-gradient(217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71%),
 linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
 linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);

radial-gradient() / repeating-radial-gradient()

同心円グラデーション

中心から外に向かってグラデーションをかけます。

gra3

gra3

gra31

background-image: radial-gradient(rgb(243, 243, 243), rgba(100, 100, 100, 0.8));

conic-gradient() / repeating-conic-gradient()

円方向グラデーション

円方向にむかってグラデーションをかけます。

background: conic-gradient(red, orange, yellow, aqua, lightpink, red);

応用：市松模様

background: conic-gradient(
 #25a37d 90deg,
 #261818 91deg 180deg,
 #25a37d 181deg 270deg,
 #261818 271deg);
background-size: 25% 25%;

開始角度と終了角度は1度ずらしたほうが良いようです。切れ目がずれてしまいます。

0-90度、91-180度、181-270度、271-360度と指定しました。ひょっとしたら最後は、359度までの指定のほうがいいかもしれませんね。

以下は環境によっては境目がずれる可能性があります。境目の指定が被っていますね。

私の場合は、ローカルで作業しているときは大丈夫で、WordPressにUploadして確認するとずれていました。

background-sizeを使用すると歪むような気がします。

background: conic-gradient(
 black 90deg,
 white 90deg 180deg,
 black 180deg 270deg,
 white 270deg);
background-size: 50% 50%;

その他メモ

listのマーカーにも使えます

Imageを置ける場所に使用できます。

list-style-image: radial-gradient(circle closest-side, #006, #00a 50%, #0000af 80%, white 100%);

• gra75
• Hello
• Yes

使用したグラデーションの拡大

gra74
circle
closest-side

未来の設定かも

in Oklab とかはまだ使用できないようですね。

CSS Images Module Level 4 で実現するのかな？

background: linear-gradient(in Oklab to right, #f01, #081);

gra71 in lab

gra72 in srgb

gra73 in Oklab

Link