The bg-clip-text technique: gradient-filled headlines in three classes.

Classes#

reference
js
<h1 class="bg-gradient-to-r from-blue-500 to-fuchsia-500 bg-clip-text text-transparent">
  Nakshora
</h1>

Example#

example
html
<h1 class="bg-gradient-to-r from-blue-500 to-fuchsia-500 bg-clip-text text-transparent">
  Nakshora
</h1>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Always pair with a solid fallback color for print/forced-colors

colors/index|Text color · utilities/typography/font-size|Font size