Answer for 2020:
This effect can now be achieved with true alpha transparency, without the need to cover the bottom with an additional <div>
. Simply use the CSS mask-image
property with a linear gradient that fades from black
to transparent
. The browser should take care of the rest for you. Demo:
.container {
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
height: 150px;
width: 300px;
overflow-y: scroll;
}
body {
background: #09f;
transition: background 0.5s ease-out;
}
body:hover {
background: #f90;
}
<div class="container">
<p>Mouse in/out of this demo or scroll down to see that it's true alpha! <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed nisl id lectus viverra faucibus. Cras sed est sit amet turpis placerat consequat. Vestibulum viverra accumsan nisl a dapibus. Quisque mollis porta dictum. Praesent dictum non nisl at rutrum. Nam sem orci, efficitur quis faucibus non, aliquam eget est. In nec finibus ex, quis tristique augue. Duis tristique turpis a nunc sodales tincidunt.</p>
<p>Morbi vehicula nisi ut lacus ornare, ac tincidunt sapien pellentesque. Aliquam gravida id dolor eget volutpat. In hac habitasse platea dictumst. Aenean ac enim eros. Vivamus augue nunc, interdum vitae pellentesque nec, interdum non turpis. Quisque viverra eget nibh in varius. Vivamus vel euismod velit. Vivamus suscipit lorem et porttitor gravida. Donec non nulla nulla. Duis eget dui sed urna eleifend sagittis.</p>
</div>
The best part of this approach is that it’s true transparency, instead of faking it by covering your text with a color that matches the background. This allows for scrolling and background images! I change the background color on hover to demonstrate that it’s truly transparent.
Browser support is pretty solid, except for IE.