Tailwind CSS v4 Gradients MadeΒ Simple
Tailwind CSS v4 introduces powerful new gradient utilities that make creating stunning visual effects effortless.
Key Features:
Linear gradients: bg-linear-to-r from-blue-500 to-pink-500
Radial gradients: bg-radial from-pink-400 to-fuchsia-700
Conic gradients: bg-conic from-blue-600 to-sky-400
Advanced control: Custom values and /oklab interpolation
No more custom CSS. Just clean, utility-first gradient creation.
Read the full article with examples and code:
Trending on Indie Hackers
Excellent guide, Michael. As someone with an engineering background, I really appreciate when a system is designed with this level of elegance.
For me, the standout feature here is the /oklab interpolation. It's a small detail, but it shows a deep commitment to quality by addressing the "muddy" center that you sometimes get with standard RGB gradients. It's that kind of precision that makes a front-end framework truly robust.
This is a huge step up from manually writing gradient code. Thanks for laying it out so clearly.