Glassmorphism
Blur and floating UI glassmorphism lightbox.
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. |
| backgroundColor | string | linear-gradient(to bottom right, #312e81, #581c87) | Background color or gradient. |
When to Use
Excellent for high-end digital agencies and portfolios that want a premium 'Glassmorphism' aesthetic with backdrop-blur effects and light refraction.
Best Practices
Use gradient backgrounds for maximum glass effect. Bold, colorful images work best against the frosted overlay.
Why This Component Matters
Glass-based aesthetics communicate digital excellence, sophistication, and high-end craft. This production-ready Uilora template helps you build an interface that feels curated and premium.
FAQ
QIs the blur real?
Yes — uses CSS backdrop-filter blur combined with a purple radial glow behind the image for depth.
QWhat's in the info bar?
A floating glass panel with 'Uilora Visual' title, subtitle, and like/download action buttons.
QIs it mobile responsive?
The modal scales to max-w-5xl and the glass bar adapts its width fluidly.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.