App Download Hero — iOS Android Store Buttons HTML CSS

The app download hero is the most critical section of any mobile app landing page — it must communicate the app's value proposition, show what the app looks like, and drive users to download in under 5 seconds. This snippet builds a complete dark-theme app download hero: animated gradient text headline, App Store and Google Play buttons, a CSS phone frame mockup with a realistic app UI inside, star rating with review count, overlapping social proof avatars, and a radial glow background effect.

App landing pages from Notion, Linear, Robinhood, and Revolut all use this hero layout — left-side text and CTAs, right-side phone mockup showing the actual app UI. The phone mockup removes the need for actual screenshots and loads instantly, while the social proof row (overlapping avatars + user count) provides the "this is popular" signal that drives downloads.

CSS phone frame mockup

The phone frame is built entirely in CSS — no images, no SVGs. A dark rounded rectangle (border-radius: 36px) with a double border (inner border via box-shadow: 0 0 0 1px #1e293b) simulates a phone bezel. The notch is a centred dark rectangle at the top. The screen content is a flex column of app UI elements: header, balance card, bar chart, and transaction list.

The balance card uses an actual gradient (linear-gradient(135deg, #6366f1, #8b5cf6)) matching the hero's accent colour — this creates visual cohesion between the phone mockup and the surrounding hero content. The bar chart uses flex-aligned divs of varying heights — the active bar gets the gradient fill, all others remain dark.

Gradient text headline

The "beautifully simple." gradient uses background: linear-gradient(90deg, #818cf8, #c084fc, #f472b6) with -webkit-background-clip: text and -webkit-text-fill-color: transparent. The cross-browser approach uses both -webkit-background-clip: text (Safari/Chrome) and the standard background-clip: text (Firefox). The gradient runs from indigo through purple to pink — a colour story that complements the dark navy hero background.

Store buttons

Both store buttons use the same .store-btn base class with the native platform icon SVG. The layout is icon + two-line text block: a small "Download on the" / "Get it on" label and a larger platform name. This matches the exact layout of the official Apple and Google store badge design guidelines. Pair with a floating dock for a mobile navigation pattern that complements the app download theme.

Radial glow background

The hero background combines two radial gradients on the .hero-bg element and its ::before pseudo-element. The main glow is centred toward the phone side of the layout; the secondary glow appears at the bottom-left for depth. The phone itself has a separate .phone-glow div with a blurred radial gradient beneath it — simulating the ambient light effect used in Apple's product photography.