How to Fade-Out the End of a Text Line in CSS

Is it possible to fade-out the end of a text line in CSS?

Is something like this what you're looking for?

div {

  background: linear-gradient(to bottom right, red, yellow);

}

h2 {

    background-image: linear-gradient(90deg,#000000 0%,rgba(0,0,0,0));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    position:relative;

    display:inline-block;

    font-size: 50px;

}

<div>

  <h2>

    test test test test test

  </h2>

</div>

Fadeout last line of text if more than n lines

This requires a container with the overflow on. The overlay is inside the child and has it's height derived from calc(100% - (line-height × 3)) - which will yield either a negative number (which gets turned into 0 by the browser), 0, or the excess height. We then use a fixed height gradient with repeating-linear-gradient and move it up by (line-height).

.holder {
    width: 275px;
}

.title {
    margin: 30px 0;
    max-height: 75px; /* line-height × 3 */
    overflow: hidden;
}

.title > h2 {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 25px;
    font-size: 18px;
}

.title > h2::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(100% - 75px); /* 100% - (line-height × 3) */
    transform: translateY(-25px); /* 0 - line-height */
    background: repeating-linear-gradient(rgba(255, 255, 255, 0), #ffffff 25px); /* line-height */
}

<div class="holder">
    <div class="title">
        <h2>1 line of text 1 line of text</h2>
    </div>
    <div class="title">
        <h2>2 lines of text 2 lines of text 2 lines of text 2 lines of text 2 lines of text</h2>
    </div>
    <div class="title">
        <h2>3 lines of text 3 lines of text 3 lines of text 3 lines of text 3 lines of text 3 lines of text 3 lines of text</h2>
    </div>
    <div class="title">
        <h2>4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text 4 lines of text</h2>
    </div>
    <div class="title">
        <h2>5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text 5 lines of text</h2>
    </div>
    <div class="title">
        <h2>6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text 6 lines of text</h2>
    </div>
</div>

Fading out text on overflow with css if the text is bigger than allowed

Looks like your requirement is just to fade out the text beginning at a certain height (about 150px), the text (if any) presenting at that height is considered as overflow. So you can try using some kind of transparent linear gradient layer placed on top of the text area, we can achieve this in a neat way using the pseudo-element :before like this:

.row:before {
  content:'';
  width:100%;
  height:100%;    
  position:absolute;
  left:0;
  top:0;
  background:linear-gradient(transparent 150px, white);
}

Fiddle

How to fade out text on top of semi-transparent div using CSS?

I finally found a solution that meets all my requirements by adding just one line of CSS to .box > p: -webkit-mask-image (accepted answer by Adrian van Vliet). I've updated my codepen to show this solution: http://codepen.io/thdoan/pen/wKZBrN

.box > p {
    -webkit-mask-image: -webkit-gradient(
        linear,
        left 50%,
        left bottom,
        from(rgba(0,0,0,1)),
        to(rgba(0,0,0,0))
    );
}

Even though this is considered "non-standard" CSS, it's no big deal for my case since if a browser doesn't support it then the content will degrade gracefully to white text simply not having a gradient fade. In the meantime, I am experimenting with another solution that is more cross-browserish using SVG: Applying SVG effects to HTML content. I will update this answer with a codepen using an SVG mask if I ever get it to work.

Thanks to all who replied :-).

UPDATE: Here is a solution using SVG: http://codepen.io/thdoan/pen/rObVdJ

The full cross-browser solution is laid out in the nice tutorial, CSS Masks – How To Use Masking In CSS Now by Christian Schaefer.

CSS3 fading out text

Never mind, I've found my own solution.

blablablabla<span class="readmore">blablablabla</span>

.readmore {
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
}

Unfortunately, only works on webkit.

Progressively transparent text at the end of a div

Yes, you can do it, and without the vendor prefixes:
Place a div over the text area. In this div class="fadeout"> you put an image that has a gradient of increasing white, being transparent in the top of that image and only white (or the background-color of your page) at the bottom. The text in the underlying text area will look like being faded out.

The Image can be replaced by CSS-Gradient:

.fadeout {
    background-image: 
      -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 20%, #FFFFFF 95%);
}

but this has vendor-specific prefixes.

Make text appear immediately but fade out gradually using modern CSS transitions

Based on the comments, I believe this is the solution you are looking for:

document.getElementById('btn_click').addEventListener('click', function() {

    var span = document.getElementById('fader');

    

    span.style.transition = 'none';

    span.style.opacity = '1';

    span.textContent = 'fading message';

    

    /* This line seems to 'reset' the element so that the transition can be run again. */

    void span.offsetWidth;

    

    span.style.transition = 'opacity 1s';

    span.style.opacity = '0';

});

<div>

  <span id="fader"></span><br/>

  <button id="btn_click">Click to fade</button>

</div>

---

Related Topics