css text fade out on scroll

How we can create a text fade out effect using HTML & CSS? Solution: CSS Text Fade Out On Scrolling Effect, Pure CSS Fade Out Text effect on the scroll.

Maybe you know about fade out effect, Fade out is a transition where the object slowly disappears. That same effect we can implement on texts on the webpage also. This fade-out effect will work when you scroll up or down to read the article. You can use this on your website or blog.

Today you will learn to create fade-out transition effect on texts or paragraphs. That’s not a difficult thing to create or understand, this is a very short program with fewer codes. Actually, this fade-out effect is based on background-clip and background-attachment property in CSS.

So, Today I am sharing CSS Text Fade Out On Scrolling Effect. A pure CSS fade out text effect, which works on the scroll. When any user will start scrolling down to read the article, then the text goes upper side with fade out transition effect. I know this is a very basic but useful thing to your knowledge.

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

Preview Of Paragraph Fade-Out Transition

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

Now you can see this visually. If you like this then get the source code of its.

You May Also Like:

CSS Text Fade Out On Scrolling Effect Source Code

Before sharing source code, let’s talk about it.  For creating this fade-out effect I used display: grid; in the body tag. I positioned the last paragraph at bottom using body :last-child { margin-bottom: 0; }. I have used an image & a google font in this program. The main thing is in this concept I a background gradient for the paragraph, that creates the fade-out effect.

With the gradient, I have used background-clip: text; in the P tag. This also has a responsive design using CSS @media query. I have just reduced the font size on small screens. Left other things you will understand after getting the codes.

For creating this you have to create only 2 files, One for HTML, & 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.

That’s It. Now you have successfully created CSS Text Fade Out On Scrolling Effect. In other words, Pure CSS Fade Out Text effect on the scroll. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

LEAVE A REPLY

Please enter your comment!
Please enter your name here