CSS Text Overlay Over Image at Bottom With Gradient Background

May 30, 2020
.image-overlay {  position: relative;}.image-overlay > div {  padding: 1rem 0.5rem 0.25rem 0.5rem;  position: absolute;  bottom: 0;  width: 100%;  line-height: 1.25rem;  background: rgba(255,255,255,.4);  background: linear-gradient(0deg, rgba(255,255,255,.6) 0%, rgba(0,0,0,0) 100%);      text-shadow: 1px 1px 0px rgba(200,200,200,.85);}


<div class="image-overlay">
  <a href="#" target="_self">
    <img src="https://picsum.photos/600" alt="Test" />
  <div>Black Text with White Shadow at bottom, with blending gradient background</div>


alt text

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.