Linear gradient which make text "disappear"

Question

I need some help. There are a few containers that have text inside. Obviously there is a lot of text, so there have to be scroll. But I don't want text look like it's cut, I want to "blur" the bottom of the single container.

Here are the results: https://jsfiddle.net/rsze93wk/3/

Well, it looks... pretty shitty in my opinion. The bottom of the container should be almost invisible, but I can clearly read it. I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.

There is also a problem, gradient stays in one place when I scroll down. Can you help me solve this? Also, maybe you have any ideas how to make this effect look much better?

maybe you are looking for this kind of effect: https://stackoverflow.com/a/59431975/8620333 — Temani Afif, Jan 05 '20 at 19:31
You are right, it's really helpful. Also thanks for the answer, it;s perfect! — hames, Jan 05 '20 at 21:06

Temani Afif · Accepted Answer · 2020-01-05T20:03:11.530

^{Update: the first snippet seems to be buggy on Chrome but works fine on Firefox}

You can try to color the text using gradient like below:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
  background: linear-gradient(#000 calc(100% - 50px),white);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

Another alternative using sticky:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
}
.main::after {
   content:"";
   display:block;
   height:200px;
   margin-top:-200px;
   position:sticky;
   bottom:0;
  background: linear-gradient(transparent calc(100% - 50px),white);
  pointer-events:none;
}

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

And if you want a real blur effect use backdrop-filter:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
}
.main::after {
   content:"";
   display:block;
   height:20px;
   margin-top:20px;
   position:sticky;
   bottom:0;
  pointer-events:none;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

Deykun · Answer 2 · 2020-01-05T20:03:13.423

I want to "blur" the bottom of the single container.

Blur is CSS filter (filter: blur(1)) and you can't use it here with the after:: pseudoelement because content of that element is empty.

I used :after and display: block to make this effect, so I'm unable to select the text under that pseudo-element.

This is a good and common solution. To make text bellow the after:: clickable you can add pointer-events: none; to the after::.

There is also a problem, gradient stays in one place when I scroll down.

after:: should be positioned to the .main and in the .main you should have another container with scroll.

Linear gradient which make text "disappear"

2 Answers2

Linked