Animated Gradient Borders with Tailwind CSS
🔔 Subscribe for more!
/ @frontendadvance
Join this channel to get access to perks:
/ @frontendadvance
💚 Get Project Source Code by Buy Me a Coffee
https://www.buymeacoffee.com/frontend...
❤️ Get Project Source Code by Patreon
/ frontendadvances
==========================================
Animated border gradients have become a popular design trend, particularly on SaaS and startup landing pages. Inspired by this trend, we decided to create our own version using Tailwind CSS.
We made a card highlighted with this particular visual effect using only CSS. By leveraging Tailwind’s arbitrary properties we created a complex gradient, consisting of:
1. A linear gradient with three stop-colors for the background
2. A conic gradient with five stop-colors for the borders
Then, we added a CSS @property rule to control the angle of the conic gradient. This allowed us to animate the gradient with a new animation defined in the tailwind.config.js file.
Note: this animation is currently only supported in Chrome and Chromium-based browsers. Firefox does not yet support the CSS @property rule, but it is expected to be integrated soon, as it is already available in the nightly development version.
==========================================
💙 Support me by PayPal
https://www.paypal.com/paypalme/Rajac...
👍 Thanks for watching!Support me with a like + A Subscription! ❤️