PROMPT_007 / GLASSMORPHISM

GLASS, BUT HEAVY AND DARK.

One disciplined glass treatment for floating surfaces only — not for every container.

BEST FOR: Dark interfaces where glass has been applied indiscriminately.
DIFFICULTY: Easy
TOOLS: Lovable · v0

USE THIS IN LOVABLE

Introduce a single GlassPanel primitive and use it only for floating control surfaces: navigation, command bar, modals, filters and tooltips.

Treatment: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); backdrop-filter blur(24px) saturate(140%); 1px rgba(255,255,255,0.16) border; 24px radius; inset 0 1px 0 rgba(255,255,255,0.12) highlight; shadow 0 30px 80px -40px rgba(0,0,0,0.9).

Rules: write only the standard backdrop-filter property (no -webkit- duplicate), never more than three glass layers on screen at once, and keep content cards on solid dark surfaces. Verify text over glass still meets WCAG AA against the worst-case backdrop.

---
Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.

RECOMMENDED INTERACTIONS.

GLASS / SURFACE

Blur 24px · edge light

INTERACTION_010CSS

Glass Panel

Heavy dark glass with an inner edge highlight.

App UI / MediumView

BORDER BEAM

INTERACTION_011CSS

Animated Border

A light travels the perimeter of the container.

Cards / MediumView

RELATED PROMPTS.

All prompts

PROMPT_001 / LANDING PAGES

MAKE MY WEBSITE FEEL EXPENSIVE.

Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.

premiumlanding-pagemicrointeraction

Preview

PROMPT_002 / LANDING PAGES

BUILD A LANDING PAGE THAT LOOKS HIRED.

A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.

premiumlanding-pagedark-ui

Preview

PROMPT_003 / BUTTONS

GIVE MY CTA GRAVITY.

A reusable cursor-following button component with proper touch and reduced-motion fallbacks.

buttonmousepremium

Preview