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

Solution 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.

Solution 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.