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.
Text Hover Shine Effect
![Text Hover Shine Effect](https://forfrontend.com/wp-content/uploads/2024/01/Text-Hover-Shine-Effect.gif)
Animated Gradient Shine Text
![Animated Gradient Shine Text](https://forfrontend.com/wp-content/uploads/2024/01/Animated-Gradient-Shine-Text.gif)
Slide to Unlock Shine
![Slide to Unlock Shine](https://forfrontend.com/wp-content/uploads/2024/01/Slide-to-Unlock-Shine.gif)
CSS Button Shine Effect
![Shiny CSS Animation Button](https://forfrontend.com/wp-content/uploads/2024/01/Shiny-CSS-Animation-Button.gif)
Shining Text Effect CSS3
![Shining Text Effect CSS3](https://forfrontend.com/wp-content/uploads/2024/01/Shining-Text-Effect-CSS3.gif)
CSS Shine Button Animation
![CSS Shine Button Animation](https://forfrontend.com/wp-content/uploads/2024/01/CSS-Shine-Button-Animation.gif)
CSS Shiny Button with Hover Effect
![CSS Shiny Button with Hover Effect](https://forfrontend.com/wp-content/uploads/2024/01/CSS-Shiny-Button-With-Hover-Effect.gif)
Image Shine Effect CSS
![Image Shine Effect CSS](https://forfrontend.com/wp-content/uploads/2024/01/Image-Shine-Effect-CSS.gif)
Shine On Hover Over Image
![Shine On Hover Over Image](https://forfrontend.com/wp-content/uploads/2024/01/Shine-On-Hover-Over-Image.gif)
Shine On Hover Over Image
![Background Shine Effect CSS](https://forfrontend.com/wp-content/uploads/2024/01/Background-Shine-Effect-CSS.gif)
Glass Shine Check Box and Radio Buttons
![Glass Shine Check Box and Radio Buttons](https://forfrontend.com/wp-content/uploads/2024/01/Glass-Shine-Check-Box-and-Radio-Buttons.gif)
CSS Glass Shine Effect On Hover
![Glass Shine on Hover](https://forfrontend.com/wp-content/uploads/2024/01/Glass-Shine-on-Hover.gif)
Shine Effect On Text
![Shine Effect On Text](https://forfrontend.com/wp-content/uploads/2024/01/Shine-Effect-On-Text.gif)
CSS Text Shine Animation
![CSS Text Shine Animation](https://forfrontend.com/wp-content/uploads/2024/01/CSS-Text-Shine-Animation.gif)
Wavy Text Shine Animation
![Wavy Text Shine Animation](https://forfrontend.com/wp-content/uploads/2024/01/Wavy-Text-Shine-Animation.gif)