About This Style
Glassmorphism is an interface design style that mimics the effect of frosted glass. It creates a light, layered, and modern visual experience through background blur, translucency, subtle borders, and glossy effects.
The key to this style is that elements appear to float above a colorful, blurred background, as if viewing the world through a layer of frosted glass.
Key Features:
- Background Blur: The core feature, using the CSS `backdrop-filter: blur(Xpx);` property to blur the content behind the element.
- Transparency: Element backgrounds are usually translucent, allowing the underlying content (after blurring) to be faintly visible. Set via RGBA or HSLA values for `background-color`.
- Subtle Borders: Often includes a very fine, translucent white or light-colored border to simulate the reflection of glass edges, enhancing the element's outline.
- Layered Approach: Glassmorphism elements are often layered on top of colorful or patterned backgrounds, with the blur effect making the hierarchy clearer.
- Glossy Highlights: Sometimes subtle linear gradients or inner shadows are added to simulate light hitting the glass surface, adding a sense of depth.
- Vibrant Backgrounds: To make the blur effect more pronounced and interesting, the underlying background is usually brightly colored or contains rich visual elements.
- Accessibility Concerns: It's necessary to ensure sufficient contrast between text/foreground elements and the glass background to avoid readability issues due to complex or blurred backgrounds.
Glassmorphism is suitable for interfaces requiring a modern, techy, or light feel, such as dashboards, card layouts, sidebars, modals, etc. However, overuse can lead to visual clutter or performance issues (`backdrop-filter` is relatively performance-intensive).
Example AI Prompt
Design a user interface element (like a settings card) using the glassmorphism style. It should have a frosted glass effect with a background blur (backdrop-filter), transparency (semi-transparent white background), a subtle 1px white border, and sit on top of a colorful, abstract gradient background. Ensure text inside has good contrast.(English explanation: Design a user interface element (like a settings card) using the glassmorphism style. It should have a frosted glass effect with a background blur (backdrop-filter), transparency (semi-transparent white background), a subtle 1px white border, and sit on top of a colorful, abstract gradient background. Ensure text inside has good contrast.)
Theme CSS Snippet
The following is the core CSS code for applying the Glassmorphism style as a global theme (body.theme-glassmorphism):
/* 8. Glassmorphism Theme */
body.theme-glassmorphism {
/* Vibrant background is key for the effect to pop */
--page-bg: #ffffff; /* Fallback */
/* Example Gradient: Use a more interesting one in practice */
--page-bg-gradient: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
/* Or use a background image */
/* background-image: url('path/to/your/vibrant-background.jpg'); */
/* background-size: cover; */
/* background-attachment: fixed; */
--text-color: #333333; /* Dark text for contrast on light glass */
--heading-color: #111111;
--link-color: #0056b3; /* Standard link color, ensure contrast */
--link-hover-color: #003d80;
--border-color: rgba(255, 255, 255, 0.3); /* The subtle glass border */
/* Glass Effect Variables */
--glass-bg: rgba(255, 255, 255, 0.25); /* Semi-transparent white */
--glass-blur: 10px; /* Blur intensity */
--glass-border-radius: 12px; /* Rounded corners common */
--glass-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Soft shadow */
--glass-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
/* Apply glass effect to cards by default */
--card-bg: var(--glass-bg);
--card-shadow: var(--glass-shadow);
--card-hover-shadow: var(--glass-hover-shadow);
--card-border-radius: var(--glass-border-radius);
/* Add backdrop-filter and border directly to card or via a utility class */
--header-bg: rgba(255, 255, 255, 0.15); /* More transparent header */
--header-text-color: var(--heading-color);
--header-shadow: none; /* Shadow handled by glass effect */
/* backdrop-filter needed for header too */
border-bottom: 1px solid var(--border-color); /* Glass edge */
--footer-text-color: rgba(0, 0, 0, 0.7);
--footer-bg: rgba(255, 255, 255, 0.1); /* Glassy footer */
border-top: 1px solid var(--border-color);
/* backdrop-filter needed for footer too */
--button-bg: rgba(255, 255, 255, 0.4); /* Slightly less transparent button */
--button-text-color: #111;
--button-hover-bg: rgba(255, 255, 255, 0.6);
--button-border: 1px solid rgba(255, 255, 255, 0.5); /* Button border */
--button-secondary-bg: transparent;
--button-secondary-text-color: var(--text-color);
--button-secondary-hover-bg: rgba(255, 255, 255, 0.1);
--button-secondary-border: 1px solid var(--border-color);
--prompt-bg: rgba(0, 0, 0, 0.1); /* Darker glass for prompt */
--prompt-text-color: #f0f0f0;
/* backdrop-filter needed for prompt too */
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
--button-border-radius: 8px;
}
/* Utility class or direct application for the glass effect */
.glass-effect,
body.theme-glassmorphism .card,
body.theme-glassmorphism header, /* Apply directly if all headers are glass */
body.theme-glassmorphism footer, /* Apply directly if all footers are glass */
body.theme-glassmorphism .prompt-area /* Example */
{
background: var(--glass-bg, rgba(255, 255, 255, 0.25));
backdrop-filter: blur(var(--glass-blur, 10px));
-webkit-backdrop-filter: blur(var(--glass-blur, 10px)); /* Safari support */
border-radius: var(--glass-border-radius, 12px);
border: 1px solid var(--border-color, rgba(255, 255, 255, 0.3));
box-shadow: var(--glass-shadow, 0 5px 15px rgba(0, 0, 0, 0.1));
/* Ensure content inside doesn't leak out */
overflow: hidden; /* Can cause issues with dropdowns, use carefully */
}
/* Ensure the body has a background image or gradient for the effect */
body.theme-glassmorphism {
background: var(--page-bg-gradient); /* Or background-image */
background-attachment: fixed; /* Important for blur effect consistency */
background-size: cover;
}
/* Adjust text color inside glass elements if needed for contrast */
body.theme-glassmorphism .card,
body.theme-glassmorphism .glass-effect {
color: var(--text-color); /* Ensure text color is set */
}
body.theme-glassmorphism .card h1,
body.theme-glassmorphism .card h2,
body.theme-glassmorphism .card h3,
body.theme-glassmorphism .glass-effect h1,
body.theme-glassmorphism .glass-effect h2,
body.theme-glassmorphism .glass-effect h3 {
color: var(--heading-color);
}
/* Hover effect for cards */
body.theme-glassmorphism .card:hover {
box-shadow: var(--glass-hover-shadow);
background: rgba(255, 255, 255, 0.35); /* Slightly less transparent on hover */
transform: translateY(-3px); /* Optional: slight lift */
transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
Note: The glassmorphism effect relies on the `backdrop-filter` property; please check browser compatibility. Also, ensure the background is sufficiently colorful for the blur effect to be noticeable. Performance is also a consideration.
Download Resources (Example)
Download a ZIP archive containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).
Download glassmorphism.zip