Centered With Backdrop
A minimal centered hero, headline, lede, and two CTAs, set over a full bleed backdrop with matching light and dark images and a sticky oval navbar.
A minimal centered hero, headline, lede, and two CTAs, set over a full bleed backdrop with matching light and dark images and a sticky oval navbar.
The Modern SaaS Collection unlocks the source for every Modern SaaS block. All Access unlocks every Collection.
Already purchased? Log in
Centered With Backdrop is the simplest possible hero, dressed up by a full bleed backdrop. A sticky oval navbar floats at the top, then a centered headline, a one line lede, and two CTAs sit in the open middle of the image. There is no mockup and no decoration to distract from the pitch, the photo does the heavy lifting.
The backdrop ships as two images, a bright one for light mode and a dark one for
dark mode. They are swapped with a CSS dark: variant, so only the visible image
is fetched and the switch happens with no hydration flash. A soft radial scrim
sits behind the copy to keep it legible however the photo crops, and every line
of copy uses theme tokens, so the text inverts with the backdrop: dark text on
the light image, light text on the dark one.
Reach for this when you want a hero that leans on a strong image, a product with a distinct visual world, a launch moment, or a brand that wants atmosphere over a screenshot. Because the copy is just a headline, a lede, and two CTAs, it stays out of the image's way and keeps the focus on the click.
A natural flow around it on a Modern SaaS page:
After
src paths. Keep them wide and leave the center calm so the copy stays readable.bg-background/35 opacity, or the radial mask, if your images need more or less contrast behind the text.Tip: pick a light and dark image with the same composition so the hero feels like one design in both themes, busy in the corners, quiet in the middle.