Hero section examples

579 references from real, live websites.

Browse by

Teenage Engineering

HeroHardwareImmersive 3dDark

Handshake

HeroMarketplaceSoft gradientDark

Juli Stratmann

HeroPortfolioSoft gradient

Berd

HeroAIPlayful illustratedLight

Perplexity Personal Computer

HeroAIImmersive 3dDark

illoca

HeroAIWarm organicLight

Raw Materials

HeroAgencyBold color block

Slush

HeroCryptoImmersive 3dLight

Eight Sleep

HeroHardwareImmersive 3d

Anthropic

HeroAIWarm organicLight

Giga

HeroAIDark techDark

Warp

HeroDeveloper toolsSwiss gridLight

Resend

HeroDeveloper toolsDark techDark

Microsoft AI

HeroAISoft gradientLight

Wispr Flow

HeroAIEditorial serifLight

ISO Meet

HeroMarketplaceMinimal lightLight

Unicorn Studio

HeroDeveloper toolsImmersive 3dDark

Zed

HeroDeveloper toolsSwiss gridLight

re_

HeroFoodPhoto ledLight

iA

HeroProductivityMinimal lightLight

Fly.io

HeroDeveloper toolsPlayful illustratedLight

Koto

HeroAgencyImmersive 3d

Readymag

HeroSaaSBold color block

basement.studio

HeroAgencyImmersive 3dDark

Sign up free to keep browsing

See all 579 references full size, with motion and the notes behind each design.

More collections

About this collection

The hero is the first screen a visitor sees, and the one most worth getting right. Compare how real sites balance the headline, the supporting line, the product shot and the primary button, and notice how many lean on motion to make the first second count.