Text Gradient

SyntaxUI

Step 1. Add the Tailwind CSS configuration

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      animation: {
        textGradient: 'textGradient 5s ease infinite',
      },
      keyframes: {
        textGradient: {
          '0%, 100%': {
            'background-size': '200% 200%',
            'background-position': 'left center',
          },
          '50%': {
            'background-size': '200% 200%',
            'background-position': 'right center',
          },
        },
      },
    },
  },
}

Step 2. Add the component

TextGradient.tsx

const TextGradient = () => {
  return (
    <h1 className="animate-textGradient bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 bg-clip-text text-3xl font-semibold text-transparent">
      SyntaxUI
    </h1>
  )
}

export default TextGradient