CSS Snippet to Add Glassmorphism Effect in Bricks Builder

With this custom CSS snippet, you can instantly apply a glassmorphism (frosted glass) effect to any Bricks Builder component.

It lays a semi-transparent, blurred panel with subtle shadows and rounded corners over your vibrant backgrounds, giving a genuine glass-like appearance.

This style is ideal for those times you want certain UI elements to pop yet still let the background breathe; modern, clean, and visually engaging.

View Real Examples

• https://media.syncwin.com/
• https://store.syncwin.com/

Copy the Snippet

/*
 * Snippet: Glassmorphism CSS Effect
 * Author: Wasim Akram
 * Link: https://bricksism.com/snippet/css-for-glassmorphism-effect/
 * Version: 1.0
 */

%root% {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); /* white gradient with transparency */
    background-size: cover; /* ensure gradient covers entire area */
    background-clip: padding-box; /* clips background to inside border */
    backdrop-filter: blur(10px); /* applies blur to what's behind */
    -webkit-backdrop-filter: blur(10px); /* Safari/Chrome blur support */
    border-radius: 20px; /* rounded corners radius */
    border: 1px solid rgba(255, 255, 255, 0.18); /* subtle translucent border */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* shadow for depth */
    color: #fff; /* text color for readability */
}

Use with Bricks Builder

Here’s a simple step-by-step checklist for applying the glassmorphism CSS snippet to any component, like a header, card, or others in Bricks Builder, by adding the snippet to the CSS field of that element:

1. Open Bricks Editor:
   Edit the page or template with Bricks where your target element (header, card, etc.) is located.
2. Select the Element:
   Click on the element you want to apply the glassmorphism effect to.
3. Go to the CSS Style:
   In the element’s Style panel, find the CSS tab.
4. Insert the CSS Snippet:
   Copy the glassmorphism CSS snippet from this page and paste it directly into the element’s Custom CSS field inside the CSS tab.
5. Save and Preview:
   Save your changes and preview the page to see the glassmorphism effect in action.
6. Adjust if Needed:
   Tweak the CSS values like blur amount, border radius, or shadow to match your design preferences.

This approach lets you easily add the frosted glass effect smoothly on any selected component within Bricks Builder without any hassle.