【Tailwind CSS】グラデーションのテキストの作り方

以下のようなグラデーションのテキスト、おしゃれですよね。

ここ最近は、色々なサイトで見かけることが多いデザインです。実は、CSSでも簡単に実現することができます。本記事では、Tailwind CSS を使って実装してみようと思います。参考になれば嬉しいです。

早速ですが、コード（HTML）は以下のとおりです。

<span
  className="text-5xl font-bold tracking-widest
    bg-gradient-to-r from-pink-500 to-violet-500
    bg-clip-text text-transparent"
>
  Gradient Text
</span>

ポイントは、

bg-clip-text で、テキスト形状で背景をクリップする（同時に text-transparent も指定する）

ことです。

また、bg-clip-text クラスは背景をクリップできるので、例えば以下のように背景に画像を指定すれば、画像を切り抜いたような効果を得ることができます。これもまたインパクトがありますね。

コードも載せておきます。

<span
  className="text-5xl font-bold tracking-widest
    bg-[url('https://picsum.photos/id/56/600/300.jpg')]
    bg-clip-text text-transparent"
>
  Photo Text
</span>

詳細は、Tailwind の公式ドキュメントをご覧ください。
https://tailwindcss.com/docs/background-clip

BLOG

【Tailwind CSS】グラデーションのテキストの作り方

おすすめの記事