<style> .parent>*{ grid-area:1/1; } </style> <div class="parent grid max-w-[350px] rounded-md outline"> <img class="aspect-square w-full object-contain" src="https://www.picsum.photos/id/233/1080/920" /> <div class="h-full w-full bg-gradient-to-b from-transparent to-black/50"></div> <h1 class="mb-4 self-end text-center text-4xl text-white">Lorem, ipsum dolor</h1> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter