Skip to content

Instantly share code, notes, and snippets.

@RafalSladek

RafalSladek/pureCss_gradient_over_text.html

Last active April 6, 2016 13:16
Show Gist options
  • Save RafalSladek/0b8eedd5a362944adcb77dd72a77115b to your computer and use it in GitHub Desktop.
Save RafalSladek/0b8eedd5a362944adcb77dd72a77115b to your computer and use it in GitHub Desktop.
Download ZIP
pure css solution to create gradient over text at the bottom
Raw
pureCss_gradient_over_text.html
<body>
<style>
.list {
margin-bottom: 0;
}
.gradient {
position: relative;
bottom: 30px;
height: 30px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); <!-- support for W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+, for older browser please have a look at this page http://www.colorzilla.com/gradient-editor/ -->
}
</style>
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<div class="gradient"></div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment