Pure CSS Shimmer Text Effect With Loop Moving | Text Shine Effect

How we can create a shine and shimmer effect for text using HTML and CSS? Solution: See this Pure CSS Shimmer Text Effect With Loop Moving, Text Shine Effect.

Previously I have shared many types of text effects, But this is about shine and shimmer effect on the text. Maybe you have seen a shine effect move on text on some places. Many websites use this effect on their page’s heading or somewhere else. But this effect is pretty cool and use can be created using only CSS.

Today you will learn to create text shine effect with loop moving. Basically, there is a simple text and a shine effect which is created using a gradient, its move left to right infinite. The moving gradient creates the shimmer effect on text, with the same method we can apply the effect on other elements.

So, Today I am sharing Pure CSS Shimmer Text Effect With Loop Moving. This effect will useful for you if you are a web designer, also you can easily create this after knowing the gradient combination or you can create or own combination. Also, you can customize colors, direction, gradient points, etc.

If you are thinking now how this shimmer effect actually is, then see the preview given below.

Preview Of Text Shine Effect

See this video preview to getting an idea of how this effect looks like.

https://webdevtrick.com/wp-content/uploads/pure-css-shimmer-effect.mp4?_=1

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

• CSS Gradient Ghost Button
• Masonry Image Grid Layout
• Popup Subscription Form
• Floating Social Share Buttons

Pure CSS Shimmer Text Effect Source Code

Before sharing source code, let’s talk about it. First I have put a text line inside HTML heading one, you can place it with also paragraph or span tag. I the heading I have placed a class name, that is the main things you have put the class name and you can use any tag. I have used a google font named Lato for this text.

Now using CSS I have placed the text in middle using text-align: center;  and put the font size and weight. Now put the text’s color very fade and light and created a linear gradient which stops in white color. And using CSS @keyframe I have created an animation which goes left to right and put animation count infinite.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this effect, you have to create only 2 files one for HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

That’s It. Now you have successfully created Pure CSS Shimmer Text Effect With Loop Moving, Text Shine Effect. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.