The shine effect in CSS is a visual technique that creates a glowing or shimmering appearance on elements. It’s typically achieved using CSS gradients and animations. The gradient simulates light reflection, while the animation moves the gradient, creating the dynamic shine effect.
To create a shine effect in CSS, use a combination of linear-gradient
for the light reflection and @keyframes
animation to move the gradient across the element. This creates a dynamic, shimmering appearance. For instance, apply a linear gradient to a pseudo-element like ::after
and animate it to slide across the element.
In this post, I have shared a collection of 14+ CSS shine effects that I picked from CodePen. These examples include a variety of effects such as button shine animation in CSS, shine borders, CSS background shine and many more.
Updated Collection Info:
In May 2024, this post was updated to include 1 new additional item.
Types Of Shine Effects
- Linear Shine Effect: This effect creates a linear, shining light that moves across an element. It’s often used on buttons or images to indicate interactivity.
- Radial Shine Effect: Similar to the linear effect, but the shine radiates outward in a circular pattern. This can be used for highlighting icons or circular elements.
- Glowing Effect: This creates a halo-like glow around an element. It’s often used for notifications or to draw attention to specific elements.
- Gradient Shine Effect: This involves using gradient colors to create a shining effect, often used for backgrounds or cards.
- Animated Shine Overlay: An animated overlay that moves across the element, giving the impression of a shining surface.
- Text Shine Effect: Specifically applied to text, this can make headings or important text stand out with a glossy or shimmering appearance.