Dark SaaS Hero with Liquid Glass
Dark SaaS landing page hero section. Ideal for b2b saas, ai tools, plataformas de desenvolvedores, landing pages tech, startups, apis e sdks. AI-ready template.
Use case: B2B SaaS, AI tools, Plataformas de desenvolvedores, Landing pages tech, Startups, APIs e SDKs
Historical Context
The dark SaaS hero didn't emerge from nowhere — it's the logical endpoint of a decade-long shift away from the friendly, white-space-heavy interfaces that dominated early SaaS. When Stripe went dark in 2018, it signaled that developer tools could look like luxury goods. The rest of the industry followed. Dark backgrounds became shorthand for technical sophistication. Liquid glass is the latest evolution of this lineage. It borrows from Apple's visionOS material language and the frosted-glass experiments that Figma and Linear popularized, but pushes further — introducing refraction, caustics, and fluid distortion that make UI elements feel physically present. The video background underneath isn't decorative; it's structural. It provides the light source that makes the glass effect legible. What makes this pattern distinct from generic glassmorphism is intentionality. The glass isn't slapped on a gradient. It reacts to content beneath it, creating depth hierarchy without relying on drop shadows or borders. It's a post-flat, post-neumorphic approach that finally treats the screen as a volumetric space rather than a stack of cards.
When to Use
Deploy this when your product needs to communicate cutting-edge credibility before the user reads a single word. AI platforms, enterprise security tools, developer infrastructure, fintech dashboards — anything where perceived technical sophistication directly correlates with trust. Skip it for consumer apps targeting non-technical audiences, anything requiring WCAG AAA compliance out of the box, or products where warmth and approachability matter more than authority. The video background demands fast CDN delivery and graceful fallbacks.
Design Principles
- Depth through refraction, not shadow — let the glass distort what's behind it rather than floating above it with artificial elevation
- Video as light source — the background isn't ambiance, it's the optical engine that makes glass materials readable and dynamic
- Contrast hierarchy is non-negotiable — dark interfaces fail when text competes with effects; lock your type at 7:1 minimum against the darkest glass state
- Motion earns attention, stillness earns trust — animate the glass subtly on scroll or hover, but keep CTAs and navigation rock-solid
- Performance is a design decision — if the glass effect drops below 60fps on mid-range hardware, simplify it; a janky premium effect is worse than no effect
Technical Specs
Colors
Primary
Effects
Liquid glass com backdrop-filter blur(4px) e pseudo-element gradient border via mask-composite, video background full-screen (Terra rotacionando do espaço) com autoPlay loop muted playsInline object-cover absolute inset-0, marquee horizontal infinito translateX(0%) a translateX(-50%) em 20s linear infinite, hover suave em botões e links (200ms transition)
Light/Dark
✗ None / ✓ Full
Related
Last synced: 4/1/2026