Skip to main content Compiler
Gradient text made using Tailwind CSS

Gradient text using Tailwind CSS

Published: 2024-01-16

Since Tailwind became very popular, here’s a tutorial on how to gradientify your texts. 😇


  • text-transparent – This makes the text itself transparent
  • bg-clip-text – This makes the background only show on the text outlines
  • bg-gradient-to-{flow} – This is used to state what direction the gradients flow
  • from-{color} – Set the beginning color
  • to-{color} – This sets the end color
  • w-fit – This makes the gradient start and end from the bounding box of the text

Here’s an example for you:

<p className="bg-gradient-to-r from-red-500 to-purple-700 w-fit bg-clip-text text-transparent">
	Compiler On Top


Let’s understand how this all works and how the classes we use work with each other.

  1. We use text-transparent because we don’t actually want the real text, we only need the outline of it
  2. We apply bg-clip-text which allows us to, as the name suggests, clip the background to outline of the text
  3. We also use w-fit because without it, the gradient overflows the bounds of the text meaning we don’t get a clear view of the gradient
  4. Lastly, we use normal gradient practices in Tailwind, using bg-gradient

That’s it! This is the best way right now as there is no official support for gradient text colors