← Back to Blog
Cool CodeWeb Reaper
Creating a Gradient Underline with Tailwind CSS
How to create a gradient underline with Tailwind CSS to separate sections or make links look cool.
Gradient underlines are a small detail that make headings and links feel intentional.
Technique
Use a background gradient clipped to text for the label, or a pseudo-element with a linear gradient for the underline itself:
<a class="relative inline-block after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-gradient-to-r after:from-violet-500 after:to-fuchsia-500">
Learn more
</a>Accessibility
Keep contrast high. Decorative gradients should not be the only way to tell that something is interactive — preserve underline or color change on focus.