Style Detail - Glassmorphism

See this style applied to a real page — identical content, different stylesheet.

About This Style

Glassmorphism is an interface design style that simulates a frosted glass effect. 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 looking at the world through a layer of frosted glass.

Main Features:

Background Blur: The core feature, using CSS's `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: Usually includes a very fine, translucent white or light-colored border to simulate the reflection of light on the edge of the glass, enhancing the element's outline.
Layered Approach: Glassmorphic elements are often superimposed on colorful or patterned backgrounds, and the blur effect makes the hierarchical relationship clearer.
Glossy Highlights: Subtle linear gradients or inner shadows are sometimes added to simulate the effect of light on the glass surface, increasing three-dimensionality.
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: Ensure sufficient contrast between text and foreground elements and the glass background to avoid content being difficult to read due to a complex or blurred background.

Glassmorphism is suitable for interfaces that require a modern, technological, or lightweight feel, such as dashboards, card-based layouts, sidebars, modal boxes, etc. However, overuse can lead to visual clutter or performance issues (`backdrop-filter` is relatively performance-intensive).

Sample 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.

(Chinese 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 Code Snippet

Below 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.

Resource Download (Example)

Download a zip file containing a more complete CSS definition for this style (may include specific component styles, font file references, etc.).

Download glassmorphism.zip