Lovable brand radial gradient product hero

Summary

Hero section for SaaS product landing page featuring a radial gradient background (magenta-to-pink-to-orange-to-blue) with a centered smartphone mockup displaying a complementary glowing gradient interface.

Visual description

Dark navy background with a large, soft-edged radial gradient radiating outward from center: bright magenta-pink-orange in middle transitioning through violet and cool blue at edges. Centered within is a smartphone mockup held by a human hand (bottom-right), displaying interior screen with a vertical magenta-to-blue gradient bar. Above the device sits brand logo (white "Lovable" wordmark) and horizontal navigation bar (white text: Support, Careers, Blog, Sign in, Sign up) aligned to top-right. Soft-focus and blur effects on the background enhance depth; the gradient provides strong color contrast against the dark surroundings, making the device the clear focal point.

Key takeaway

Radial gradient as a background layer (not directly on product) creates visual energy and context without overwhelming the UI; nested gradients on device interior echo the exterior gradient, unifying the composition; hand-holding device provides human context and scale.

Reuse notes

Effective hero for modern SaaS, developer tools, or creative software aiming for playful energy. Radial gradients work best on dark backgrounds to ensure vibrant pop; the technique suits full-width hero sections where the gradient extends beyond the viewport. Pair with clear, minimal navigation to maintain focus on the product rather than the background.