How to create a white gradient thats only applied when not scrollling content

HTML-CSS
1

I’m attempting to add a a white overlay to a text only if the content is not scrolled when there is a scroll bar.
So I was trying to apply this trick : Scroll Shadows - CSS-Tricks but instead of black gradient colors using white but the problem is the white is applied below the text, based on https://codepen.io/chriscoyier/pen/YzXBYvL
if you replace

/* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;

by

radial-gradient(
      farthest-side at 50% 100%,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0)
    ) center bottom;

I guess thats the reason it doesn’t work but I don’t how to achieve this if I use :after to insert the gradient above the text it doesn’t work properly neither in relation to the scroll behavior…

2

You have white and black only so how if you put in a white overlay nothing would happen if it was the same color. Im only going off of the information from this link.

How To Create an Overlay (w3schools.com)

W3Schools Tryit Editor

3

Yes, is there something I missed or another approach to achieve this?
current code in case is helpful

.testimonial-body {
  
  height:auto;
  height:300px;
  background:white;
  border-radius:15px;  
  padding: 2.5rem 3em;
  padding-right: 0 !important;
  background: white;
}

.testimonial-body .testimonial-overflow {
    height: 100%;
    background: white;
    overflow-y:auto;
    width:100%;
    scrollbar-color: grey white;
    scrollbar-width: thin;
    padding-right: 3rem;
    background:        
    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(255, 255, 255, 0), 
      white 70%
    ) center bottom,    
      
    /* Shadow BOTTOM */
    linear-gradient(rgba(178, 222, 39, 0.2) 25% ,rgba(178, 222, 39, 0) 100%) center bottom;
      
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 14px;
  background-attachment: local, scroll;
}

Thanks

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.