Css overflow hidden div fading

Question

This is something that i want to achieve.

thing similar to this *but this is fading by using color.


<div class="something">
  <div class="inside">
    <p>Long wordingggggggggggggggggggggggggggggggggggg</p>
  </div>
</div>

.something { overflow:hidden; width: 100px; }

I wanna make the div opacity fading , instead of the color . Is is possible?

You can have a another div with orange background over the current div (using absolute positioning) and use gradient background in this div from transparent to orange. — Rakesh, Mar 24 '17 at 04:07
@Rakesh but its not gonna work if the solid background changed to a image background. right ? — webretard, Mar 24 '17 at 04:56

AimeTPGM · Accepted Answer · 2017-03-24T07:45:25.700

.wrapper{
background: orange;
}
.big-font{
font-size: 25px;
}
.fade-right {
background: -webkit-linear-gradient(right, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fade-left {
background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fade-up {
background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fade-down {
background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

<div class="wrapper">
<p class="big-font fade-right">Long wordingggggggggggggggggggggggggggggggggggg</p>
<p class="big-font fade-left">Long wordingggggggggggggggggggggggggggggggggggg</p>
<p class="big-font fade-up">Long wordingggggggggggggggggggggggggggggggggggg</p>
<p class="big-font fade-down">Long wordingggggggggggggggggggggggggggggggggggg</p>
</div>

Thanks , this is another solution -webkit-mask-image: -webkit-gradient(linear, left 50%, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); — webretard, Mar 24 '17 at 07:17

Jette · Answer 2 · 2018-03-02T11:49:35.387

I have a text box. Height is set to 4em and I needed it to fade out at the bottom where the text overflows. My solution (tested in Chrome 63 and Firefox 57):

.fade-text .fade-text-gradient::before {
  mix-blend-mode: screen;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg,transparent 50%, #fff 100%);
  pointer-events: none;     
}   
.fade-text .fade-text-gradient {
  display: inline-block;
  position: relative;
  color: #000;
  background: #fff;
  mix-blend-mode: multiply;
}

Example of use:

<div class="fade-text">
  <div class="fade-text-gradient" style="height:4em;overflow:hidden">
    <span>Insert text here - enough to overflow the div</span>
  </div>
</div>

[EDIT] Even better support in browsers:

The above does not work in Microsoft Edge, so I did some more digging. This is tested in Microsoft Edge, Firefox, Chrome, Safari on iOS and Samsung Internet on Android. It works and is even simpler:

.fade-text {
  background-image: linear-gradient(180deg, #000 70%, transparent 100%); 
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

Example of use:

<div class="fade-text" style="width:150px;height:150px;overflow:hidden">
  Put enough text here to overflow the div
</div>

The text fades to transparent and therefore you can put any background color behind it. But don't add background color directly, instead put another div around it with the background color set.

Css overflow hidden div fading

2 Answers2