How to fade a div's content out at the end of the element?

Question

I have a div with stuff in it on a page with a background gradient.
Now towards the right, I would like to fade that div out to the background:

enter image description here

I have tried using background gradients, but those are behind the text. Basically what I would need was a foreground property which I could fill with another gradient.

How can I achieve this without needing to use canvas and JavaScript?

I've answered it here http://stackoverflow.com/questions/15722975/fade-text-near-end-of-div — Mr. Alien, May 06 '13 at 11:00
@Mr.Alien Wouldn't the gradient be a problem with your method? — Cobra_Fast, May 06 '13 at 11:03
If you've a background gradient already and you are using my gradient than yes — Mr. Alien, May 06 '13 at 11:09

Nitesh · Accepted Answer · 2013-05-06T11:19:41.800

1

I suggest creating a transparent .png image and applying it as a background on top of the div with text by creating a class with absolute positioning.

.transparent {background: url("xxxxxx.png") repeat-y 0 0 transparent; position:absolute; top:0; right:0; z-index:1;}

Hope this helps.

edited May 06 '13 at 11:19

answered May 06 '13 at 10:57

Nitesh

15,425
4
48
60

This div should be on top of the div with the text of course! – SPRBRN May 06 '13 at 10:58
Yes. It should be above the text. - @rxt – Nitesh May 06 '13 at 11:00

score 0 · Answer 2 · answered May 06 '13 at 10:44

0

A transparent (rgba) gradient in a separate DIV positioned absolutely on top of the original div should do the trick.

Caveat: Absolute positioning may not be feasible, depeding on your layout.

answered May 06 '13 at 10:44

Jens Neubauer

1,090
1
13
24

How to fade a div's content out at the end of the element?

2 Answers2

Linked