Shine Text Effect in CSS and Tailwind CSS

Have you ever noticed a subtle, shimmering effect on certain websites or applications that makes text seem to glow? This is often achieved using a technique known as a "shine effect." In this article, we'll explore how to create this effect using both pure CSS and Tailwind CSS.

Understanding the Shine Effect

A shine effect involves creating a gradient overlay on text, which appears to move across it, simulating a shimmering or glowing appearance. This can be achieved using CSS's background-image property and a linear gradient.

CSS Approach

Here's a basic CSS example to create a shine effect:

.shine-text {
  font-size: 44px;
  color: transparent;
  background-clip: text !important;
  animation: shine 3s linear infinite;
}

.dark .shine-text{
  background: radial-gradient(circle at center,rgb(24 24 27 / 85%),transparent) -200% 50% / 200% 100% no-repeat,#f4f4f5;
}

.light .shine-text{
  background: radial-gradient(circle at center,rgba(255, 255, 255, 0.85),#f000) -200% 50% / 200% 100% no-repeat,#000
}

@keyframes shine {
    0% {
        background-position: 200% 0%;
    }
    100% {
        background-position: -200% 0%;
    }
}

In this example, we've defined a shine-text class that applies a linear gradient to the background. The gradient starts as white, then transitions to transparent, creating a shimmering effect. The animation property is used to animate the background position, making the gradient appear to move across the text.

Tailwind CSS Approach

Tailwind CSS offers a more concise and maintainable way to achieve the same effect. Here's how you can use Tailwind to create the shine effect:

<div 
    class="
        text-4xl font-bold tracking-tight sm:text-5xl
        animate-shine !bg-clip-text text-transparent
        [background:radial-gradient(circle_at_center,theme(colors.primary.100_/_85%),transparent)_-200%_50%_/_200%_100%_no-repeat,theme(colors.primary.800)]
        dark:[background:radial-gradient(circle_at_center,theme(colors.primary.900_/_85%),transparent)_-200%_50%_/_200%_100%_no-repeat,theme(colors.primary.100)]
    ">
    Your Text Here
</div>

Tailwind Configuration

To customize and extend Tailwind CSS, you can modify the tailwind.config.js file. This file allows you to define your own theme, add new utilities, and configure various aspects of Tailwind.

In the provided code snippet, we see an example of extending the theme and adding a custom animation. By adding the shine animation to the keyframes section and defining it in the theme section, we can easily apply it to our elements using the animation-shine utility class.

Remember to run the appropriate build command after modifying the tailwind.config.js file to generate the updated CSS.

Overall, the tailwind.config.js file is a powerful tool for tailoring Tailwind CSS to fit your project's specific needs. It allows you to create a consistent design system and streamline your development process.

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      animation: {
        shine: 'shine 3s linear infinite',
      },
      keyframes: {
        shine: {
          '0%': { backgroundPosition: '200% 0%' },
          '100%': { backgroundPosition: '-200% 0%' },
        },
      },
    },
  },
};

In Tailwind, we've defined a custom animation named shine in the tailwind.config.js file. This animation is then applied to the shine-text class using the animation-shine utility class.

Customization

You can customize the shine effect by adjusting the gradient colors, animation duration, and background size. Experiment with different values to achieve the desired look for your project.

Conclusion

By following these steps, you can create a visually appealing shine effect for your text elements using both pure CSS and Tailwind CSS. The Tailwind approach offers a more streamlined and maintainable solution, making it a great choice for larger projects.

Navigation