Glassmorphism
Blur and floating UI glassmorphism lightbox.
Main Features of Glassmorphism
How to Use Glassmorphism in Next.js
Installation Guide for Glassmorphism
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1512917774080-9991f1c4c750?q=80&w=2700&auto=format&fit=crop | Main image source URL. |
thumbnailImage | string | Optional thumbnail image URL (uses main image if not provided). | |
backgroundColor | string | linear-gradient(to bottom right, #312e81, #581c87) | Background color or gradient (hex, rgb, hsl, or CSS gradient). |
title | string | Neon Nights | Title text displayed in lightbox. |
subtitle | string | Tokyo, Japan | Subtitle text displayed in lightbox. |
showLike | boolean | true | Whether to show the like button. |
showDownload | boolean | true | Whether to show the download button. |
Related Components
When to Use
Excellent for high-end digital agencies, award-winning portfolios, and Next.js platforms that want a premium 'Glassmorphism' aesthetic. Use this lightbox for an immersive experience with blur effects and light refraction cues.
Best Practices
Follow React best practices by pairing this with high-contrast, bold imagery. Maintain consistent spacing within your design system by keeping the UI cards centered. Optimize for performance by managed the amount of blur renders.
Why This Component Matters in Modern UI Development
Glass-based aesthetics communicate digital excellence, sophistication, and high-end craft. This production-ready UI template helpsคุณ build an interface that feels curated and premium, leaving a lasting visual impression on high-value clients.
Frequently Asked Questions
QIs the blur real?
The component uses localized backdrop-filter blur and subtle inner glows (glass-shadows) to simulate light refraction through high-fidelity translucent surfaces.
QCan I adjust colors?
Absolutely, you can customize both the primary `backgroundColor` (gradient or solid) and the specific button accents to match your digital brand.
QIs it mobile responsive?
The glass cards adapt their spans and layouts for mobile, ensuring the refractive narrative remains impactful and legible on small screens.