How to fade the edge of a div with just CSS? [duplicate]

Question

Is it possible to achieve this with just one div (no background images/foreground images/layers)?

Answer 1

Example on codepen: http://codepen.io/anon/pen/sbHAc/

Relevant CSS

ol {   border   : 1px #d8d8d8 dashed;   position : relative; }  ol:after {   content  : "";   position : absolute;   z-index  : 1;   bottom   : 0;   left     : 0;   pointer-events   : none;   background-image : linear-gradient(to bottom,                      rgba(255,255,255, 0),                      rgba(255,255,255, 1) 90%);   width    : 100%;   height   : 4em; } 

---

Resulting effect

if the browser supports the pointer-events property (all major browsers except IE<=10) then the text under the gradient will be also selectable/clickable.

Answer 2

I (personally) find that using a secondary element as an "overlap" works pretty well. I do this by defining a new tag. This makes it really easy to add the desired fade out effect to any element you want using <fade/> at the end.

div {      position: relative;  }    fade {      position: absolute;      bottom: 0px;        display: block;          width: 100%;      height: 50px;          background-image: linear-gradient(to bottom,           rgba(255, 255, 255, 0),           rgba(255, 255, 255, 0.9)      100%);  }

<div>      text      <br>      text      <br>      text      <fade/>  </div>

Giving the fade element an absolute position with a gradient background works just as expected. As long as you remember to set the parent's position to relative.