Full Background Image With Text

The best community for
Indie Hackers
We're building a community of indie hackers to help each other succeed. Get in touch with us to join the community.




A full-bleed background image fills the viewport while your headline, description, and CTA buttons sit on top. The image fades in at 30% opacity with a gradient overlay that keeps text readable. A radial mask option (gradientFade prop) lets you control whether edges fade or stay sharp.
The content stack includes a headline with gradient text, supporting paragraph, two action buttons, and a row of partner logos. Everything uses Tailwind CSS for styling and Framer Motion for the fade-in animation. Swap the image URL, adjust overlay opacity, or remove the logos section as needed.
Use this for creative agency sites, photography portfolios, event landing pages, real estate listings, or any page where a strong visual first impression matters.
Explore more
Part of Hero Sections ยท All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time



