CSS Snippet to Add Layered Glow Effect in Bricks Builder

With this multi-layered glow effect snippet, you can effortlessly add a subtle glowing aura to any Bricks Builder components.

By stacking multiple softened shadows or drop-shadows, it creates a delicate illumination that enhances emphasis and depth while maintaining a clean, contemporary look.

This style works beautifully in both light and dark modes (with proper adjustments), making UI elements pop softly and naturally without distraction; ideal for buttons, cards, icons, or any shape you want to highlight elegantly.

View Real Examples

• https://media.syncwin.com/

Copy the Snippet

Snippet 1: Box-Shadow Based Glow (Default Divs / Blocks):

This snippet applies multiple-layered, soft outer shadows around any block element, like cards or buttons, to create a smooth, glowing aura that enhances visual depth and focus.

/*
 * Snippet: Layered Glow Effect with Box-Shadow
 * Author: Wasim Akram
 * Link: 
 * Version: 1.0
 */

%root% {
  box-shadow:
    0 0 6px  rgba(255, 255, 255, 0.6),   /* inner subtle glow */
    0 0 20px rgba(255, 255, 255, 0.35),  /* medium glow */
    0 0 60px rgba(255, 255, 255, 0.25),  /* large aura */
    0 0 120px rgba(255, 255, 255, 0.15); /* very soft outer aura */
}

Snippet 2: Drop-Shadow Filter Glow (Text / SVG Icons):

This snippet adds a soft, glowing light around text or icons (like SVGs) that follows their shape, helping them gently stand out without harsh edges, unlike the box shadow in the previous snippet.

/*
 * Snippet: Layered Glow Effect with Drop-Shadow Filter
 * Author: Wasim Akram
 * Link: 
 * Version: 1.0
 */

%root% {
  filter:
    drop-shadow(0 0 6px  rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.35))
    drop-shadow(0 0 60px rgba(255, 255, 255, 0.25))
    drop-shadow(0 0 120px rgba(255, 255, 255, 0.15));
}

Adjust the Glow Effect:

• Subtle Glow:
  Reduce the opacity values in the shadows or drop-shadows (e.g., 0.3, 0.2, or lower) to make the glow softer and less intense.
• Stronger Glow:
  Increase opacity or add more shadow layers to brighten and intensify the glow effect.
• Dark Mode Usage:
  Use color accents like soft blues, pinks, or greens with rgba values (e.g., rgba(0, 180, 255, 0.7)) instead of pure white for a cooler, smoother glow on dark backgrounds.
• Light Mode Usage:
  Keep glow color closer to white or light gray with subtle opacity to maintain a gentle glow without overwhelming light backgrounds.

Use with Bricks Builder

Here’s a simple step-by-step checklist for applying the layered glow CSS snippet to any component, like a card, button, icon or others in Bricks Builder, by adding the snippet directly to the element’s CSS field:

1. Open Bricks Editor:
   Edit the page or template in Bricks where your target element (like a card, button, icon, or any shape) is located.
2. Select Your Element:
   Click on the element you want to add the layered glow effect to.
3. Locate the CSS Style:
   In the element’s Style panel, find the CSS tab.
4. Paste the Glow CSS Snippet:
   Copy the layered glow CSS snippet provided (box-shadow or drop-shadow version) and paste it directly into this element’s Custom CSS field.
5. Save and Preview:
   Save your changes and preview the page to see the glow effect applied immediately.
6. Adjust as Needed:
   Tweak the glow by changing CSS values like blur size, shadow opacity, or border-radius (as explained above) until it perfectly fits your design.

This method lets you quickly add an elegant glow effect to any component in Bricks Builder without any complex setup of layerings; just one CSS snippet per element, and you’re done!