Glassmorphism

Stylegeneral

Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer. Best for Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation.

Frosted glass transparent blurred background layered vibrant background light source depth multi-layer

#0080FF

#8B00FF

#FF1493

#20B2AA

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Glassmorphism

Keywords: Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer
Primary colours: Translucent white: rgba(255,255,255,0.1-0.3)
Secondary colours: Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA
Effects & animation: Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth
Best for: Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation
Do not use for: Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark

## Prompt keywords
Design a glassmorphic interface with frosted glass effect. Use backdrop blur (10-20px), translucent overlays (rgba 10-30% opacity), vibrant background colors, subtle borders, light source reflection, layered depth. Perfect for modern overlays and cards.

## CSS / technical
backdrop-filter: blur(15px), background: rgba(255, 255, 255, 0.15), border: 1px solid rgba(255,255,255,0.2), -webkit-backdrop-filter: blur(15px), z-index layering for depth

## Implementation checklist
☐ Backdrop-filter blur 10-20px, ☐ Translucent white 15-30% opacity, ☐ Subtle border 1px light, ☐ Vibrant background verified, ☐ Text contrast 4.5:1 checked

## Design system variables
--blur-amount: 15px, --glass-opacity: 0.15, --border-color: rgba(255,255,255,0.2), --background: vibrant color, --text-color: light/dark based on BG

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source