TailwindCSS 背景にグラデーションカラーを適用する方法

TailwindCSS 背景にグラデーションカラーを適用する方法

TailwindCSSで背景にグラデーションカラーを適用する方法について、調べたことをまとめました。TailwindCSSで、背景にグラデーションカラーを適用するには、グラデーションの方向を決めるユーティリティクラスと、スタートのカラー、中間のカラー、終了のカラーを決めるユーティリティクラスを追加する必要があります。グラデーションで透明色の指定方法についても、解説します。

グラデーションの方向を指定するユーティリティクラス

グラデーションの方向を指定は、bg-gradient-to-{direction}というユーティリティクラスを使います。{direction}には、方向を入れます。

右方向にグラデーション

bg-gradient-to-rを使います。

<div class="bg-gradient-to-r from-blue-500"></div>
グラデーション右から左

左方向にグラデーション

bg-gradient-to-lを使います。

<div class="bg-gradient-to-l from-red-500"></div>
グラデーション左から右

下向きグラデーション

下方向は、bg-gradient-to-bを使います。

<div class="bg-gradient-to-b from-blue-500 via-green-500 to-yellow-200"></div>
下向きグラデーション

右下グラデーション

右下方向にグラデーションカラーを適用するには、bg-gradient-to-brを使います。

<div class="bg-gradient-to-br from-blue-500 via-green-500 to-yellow-200"></div>
右下方向のグラデーション

左下グラデーション

左下方向にグラデーションカラーを適用するには、bg-gradient-to-blを使います。

<div class="bg-gradient-to-bl from-blue-500 via-green-500 to-yellow-200"></div>

上向きグラデーション

<div class="bg-gradient-to-t from-blue-500 via-green-500 to-yellow-200"></div>

グラデーションの透明色、スタート色、中間色、終了色のユーティリティクラス

透明色

TailwindCSSは、from-{color}というユーティリティクラスを使うと、デフォルトで透明色にフェードアウトします。そのため、to-taransparentといった指定は不要です。※{color}の部分には、カラー指定のユーティリティクラスをいれてください。

スタート色

スタート色は、from-{color}を使います。from-blue-500というようなクラス名で指定します。

<div class="bg-gradient-to-r from-blue-500"></div>
グラデーションのスタートの色

中間色

中間色は、via-{color}を使います。via-green-500というようなクラス名で指定します。

<div class="bg-gradient-to-r from-blue-500 via-green-500"></div>

終了色

中間色は、to-{color}を使います。to-green-500というようなクラス名で指定します。

<div class="bg-gradient-to-r from-blue-500 via-green-500 to-yellow-200"></div>

スタート色を透明にする

from-transparentを使うと、スタートの色を透明にできます。

<div class="bg-gradient-to-r from-transparent via-green-500 to-yellow-200"></div>

おわりに

以上、TailwindCSSで背景にグラデーションを適用する方法と、グラデーションの方向と、カラーの指定方法を説明してみました。ボタンごとに色を変えるような場合でも、とても簡単にできて、便利です。

まい

フロントエンドエンジニア目指して、勉強中です。

Tailwind CSSカテゴリの最新記事