87

enter image description here

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

antonpug
  • 13,724
  • 28
  • 88
  • 129

3 Answers3

117

You could overlap a pseudoelement with a gradient applied on it

ol {
  border: 1px #d8d8d8 dashed;
  font: 2em/1.6em Arial;
  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;
}
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ol>

Since pointer-events is set to none the text under the gradient will be also selectable/clickable.

Update 03.2023

The same effect can be achieved with the mask property

ol {
  --mask: linear-gradient(to bottom, 
      rgba(0,0,0, 1) 0,   rgba(0,0,0, 1) 40%, 
      rgba(0,0,0, 0) 95%, rgba(0,0,0, 0) 0
  ) 100% 50% / 100% 100% repeat-x;
  
  border: 1px #d8d8d8 dashed;
  font: 2em/1.6em Arial;
  -webkit-mask: var(--mask); 
  mask: var(--mask);
  
}
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ol>
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • 1
    Perfect...beat me to it by 30 seconds. +1 – Paulie_D Mar 26 '14 at 15:57
  • Browser support on pointer-events is rather weak btw. http://caniuse.com/#search=pointerevents – Scott Simpson Mar 26 '14 at 15:59
  • of course, if the text is supposed to contain links, buttons or input this solution is not suitable, anyway since it's a visual effect you may show it only on browser supporting that property. – Fabrizio Calderan Mar 26 '14 at 16:06
  • 7
    I came here looking for a fade effect at the edge of a scrolling list—I assume the OP is trying to do something similar. I forked this Pen, wrapped the `ol` in a `div` and ended with the effect I'm looking for. http://codepen.io/1deadpixel/pen/XNXaMY – phip Nov 10 '16 at 23:06
  • Is there any way to get a fade to transparent? This is a fade-to-white and I get that you can pretty much do any color, but preferably I'd like the opacity itself to adjust rather than putting an overlay on. – Nathan Feb 17 '19 at 21:35
  • Beautiful stuff. Works really well. Nice and clean and customizable. – Joshua Pinter May 26 '22 at 16:16
  • The second option with the mask is the best option I've seen, since it doesn't require you to provide any color, like in the first option. Having a different colored background (e.g. when using dark mode) doesn't make it look different! Thanks :) – Gereon99 Jun 12 '23 at 11:25
18

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.

Aleksander Azizi
  • 9,829
  • 9
  • 59
  • 87
  • 2
    This only works if the content is sitting on a white container. If the color below it is anything else this will look weird. Of course it is possible to change the color to match the background but this becomes a problem if the background is not a solid color, such as a gradient of a picture. – Bruno Finger Jun 15 '20 at 11:06
  • This works well on a nav menu if you want to fade the edges. The other methods shown here prevent the user from clicking on the links. Of course you need two fade elements, one on each side. I tried so many different approaches until this one worked. Thanks @Aleksander Azizi!! – John Meyer Apr 15 '21 at 14:24
6
<style>
.fade {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}
</style>

Here is an example for you http://jsfiddle.net/nrgx7/

  • 2
    Thank you. However this doesn't answer my question. Your solution would require a second .fade element to be added to accommodate the fading. – antonpug Mar 26 '14 at 15:52
  • Get rid of the div and just do it as pseudo element: http://jsfiddle.net/nrgx7/129/ – A Friend Jul 02 '18 at 03:12