CSSグラデーションの使い方をシンプルにわかりやすく説明します。パッと見長くてとっつきづらいCSSの記述ですが、一つずつ見れば大した事はありません。この機会にCSSグラデーションを理解して、自分の思い通りの表現ができるようになりましょう。

CSSグラデーションの基本

線形グラデーション (Linear Gradient)

線形グラデーションは、色が直線上で変化するグラデーションです。以下の例を見てください。

See the Pen Gradient1 by yusuke1110 (@yusuke1110) on CodePen.

このコードは、左から右へ赤から青へのグラデーションを作成します。グラデーションの方向を変えるためには、to right の部分を to left や to top などに変更します。

例: 上から下へのグラデーション

See the Pen Gradient1 by yusuke1110 (@yusuke1110) on CodePen.

放射状グラデーション (Radial Gradient)

放射状グラデーションは、中心から外側に向かって色が変化するグラデーションです。

See the Pen Gradient3 by yusuke1110 (@yusuke1110) on CodePen.

このコードは、円の中心から外側に向かって赤から青へのグラデーションを作成します。circle を ellipse に変更すると、楕円形のグラデーションが作成されます。

例: 楕円形の放射状グラデーション

See the Pen Gradient4 by yusuke1110 (@yusuke1110) on CodePen.

2. グラデーションのカスタマイズ

色の追加

グラデーションに複数の色を追加することもできます。以下の例では、赤、黄色、青の3色を使用しています。

See the Pen Gradient5 by yusuke1110 (@yusuke1110) on CodePen.

色の位置を指定

色の位置を指定することで、グラデーションの見た目をさらにカスタマイズできます。

See the Pen Gradient6 by yusuke1110 (@yusuke1110) on CodePen.

このコードでは、赤が0%、黄色が20%、青が100%の位置に配置されます。

3. 実践的な例

ボタンのグラデーション

これまで見てきたやり方を応用すると、ボタンにグラデーションを適用することもできます。

See the Pen Gradient7 by yusuke1110 (@yusuke1110) on CodePen.

画像にグラデーションをかける

画像にグラデーションを適用して、印象的なデザインにすることもできます。以下は背景画像にグラデーションを適用した例です。

See the Pen Gradient9 by yusuke1110 (@yusuke1110) on CodePen.

疑似要素を追加する方法でも、画像にグラデーションをかけることができます。

See the Pen Gradient10 by yusuke1110 (@yusuke1110) on CodePen.