CSS3 fading out text

Question

I've been trying to get my text to fade out. I've tried some codes I've found on the internet, but they seem to be only for block elements.

what is he "code" you are talking about. paste some sample or jsfiddle link — , Jul 06 '13 at 06:39
They only work on block elements, while text is a inline element. — Duncan, Jul 06 '13 at 06:40

Duncan · Accepted Answer · 2013-11-01T11:37:55.537

13

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.

edited Nov 01 '13 at 11:37

answered Jul 07 '13 at 16:46

Duncan

954
3
15
23

I used it as below: -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%); Because i thought that is most usual at looking. Thanks again. – QMaster Feb 13 '14 at 15:45
That solution seems to always fade, not just fade on overflow. – Patrick Szalapski Aug 16 '22 at 21:02

score 8 · Answer 2 · answered Jul 06 '13 at 06:42

Here is Fiddle Example , you can try likes this .

html

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum massa     nec mi porta ut dictum dolor consectetur. Nunc imperdiet fermentum mauris, aliquam rhoncus magna suscipit eget. Cras neque velit, posuere ut pulvinar eu, faucibus sit amet tellus. Nullam sed orci tempus risus commodo commodo.</li>
</ul>

css

body {
font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
font-size: 13px;
 }

 ul { margin: 20px; padding: 0; }

 li {
position: relative;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
 }
 li:after {
content: "";
pointer-events: none;
position: absolute;
width: 100px;
height: 100%;
top: 0; right: 0;

background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 }

 /*
 This piece of code works great too, but only on Webkit Browsers!
 li {
color: white;
position: relative;
overflow: hidden;
white-space: nowrap;
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
 }
 */

What if I need two gradients at right and bottom sides of text block? — kas-kad, Feb 07 '14 at 17:06

score 3 · Answer 3 · answered Feb 04 '16 at 15:41

3

For Googlers, here is a simple generic solution I figured out after scouring the internet.

.excerpt {
  position: relative;
}

.excerpt::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to bottom, transparent, white);
}

You can play with the parameters of linear-gradient to get different results, such as to right, or transparent 25%.

Try the Fiddle.

answered Feb 04 '16 at 15:41

HoppyKamper

1,044
9
10

Good if the background is a solid color. Otherwise it will be a mess. – Slava May 29 '17 at 11:31

score 1 · Answer 4 · answered May 29 '17 at 11:42

1

For the folks coming here from the future, CSS4 probably already includes:

text-overflow: fade;

https://drafts.csswg.org/css-ui-4/#text-overflow

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Greetings from 2017.

answered May 29 '17 at 11:42

Slava

2,887
3
30
39

1

Unfortunately I think your clairvoyance was [faulty](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility). (However, as I write this, your rep is the same as the current year. *creepy...*) – ashleedawg Dec 11 '19 at 10:01

CSS3 fading out text

4 Answers4

html

css

Linked