【CSS】色・グラデーションを扱う関数一覧

色関数

関数説明
rgb()rgb(255, 0, 0)RGB色空間を使用して色を指定。
rgba()rgba(255, 0, 0, 0.5)RGB色空間を使用して透明度を持つ色を指定。
hsl()hsl(120, 100%, 50%)HSL色空間を使用して色を指定。
hsla()hsla(120, 100%, 50%, 0.7)HSL色空間を使用して透明度を持つ色を指定。

rgb(),rgba()

RGB関数は赤(Red)・緑(Green)・青(Blue)の各出力値を指定し、RGBA関数はアルファ(透明度)も含めて指定します。
透明度は0〜1で設定し、0は0%(透明)1は100%(不透明)0.5は50%(半透明)となります。

hsl(),hsla()

HSL関数とHSLA関数は、色を指定するためのもので、HSL関数は色相(Hue)、彩度(Saturation)、明度(Lightness)を指定し、HSLA関数はアルファ(透明度)も含めて指定します。

記述例:

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

グラデーション関数

関数説明
linear-gradient()linear-gradient(to right, red, yellow)線形グラデーションを指定。方向と色の範囲を指定。
radial-gradient()radial-gradient(circle, red, yellow)放射状グラデーションを指定。中心形状と色の範囲を指定。

linear-gradient()

linear-gradient()は、CSSで線形のグラデーションを作成するための関数です。
この関数を使用すると、複数の色を線形に結合し、滑らかな色の変化を生成することができます。
このグラデーションは、ボーダー、背景、テキストなどのさまざまな要素に適用することができます。

左から右へのグラデーション

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、左から右へのグラデーションを作成しています。開始色が#3498dbで終了色が#e74c3cです。

斜めのグラデーション

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、45度の角度で斜めのグラデーションを作成しています。
開始色が#2ecc71で終了色が#f39c12です。

複数色のグラデーションを指定

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、左から右へのグラデーションで、3つの異なる色を指定しています。

透明度を含むグラデーション

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、透明度(アルファチャンネル)を含むグラデーションを作成しています。
開始色は赤で透明度が0.5、終了色は緑で透明度が0.5です。

radial-gradient()

radial-gradient()は、CSSで放射状のグラデーションを作成するための関数です。
この関数を使用すると、中心から外側に向かって色が広がるグラデーションが作成できます。
このグラデーションは、背景やボーダー、要素の任意のプロパティに適用することができます。

円形のグラデーション

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、中心から外側に向かって円形のグラデーションを作成しています。
開始色が#3498dbで終了色が#e74c3cです。

楕円形のグラデーション

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、中心から外側に向かって楕円形のグラデーションを作成しています。
開始色が#2ecc71で終了色が#f39c12です。

中心位置を指定したグラデーション

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、グラデーションの中心位置を30% 70%に指定しています。
開始色が#3498dbで終了色が#e74c3cです。

複数色のグラデーション

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

この例では、中心から外側に向かって円形のグラデーションで、3つの異なる色ストップを指定しています。

こちらの記事はいかがでしたか?
+1
0
+1
0
+1
0
+1
0

【PR】Tech Tech Zoo

【PR】オリジナルキャラクター「てくてくず」を公開しました!

作品は、随時X(旧Twitter)で公開していきます!
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X(旧Twitter)アカウントはこちら:
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • 【jQuery】特定範囲内で表示・スクロール追従するメニュー / サイドバー【レスポンシブ対応】

    VIEW MORE
  • 【WordPress】タイトルにマッチしたタグの記事一覧を表示する方法と注意点

    VIEW MORE
  • コンテンツ内(要素内)でのスクロールを作成・制御する方法【overflowプロパティ】

    VIEW MORE

CONTACT

contact