MARKETPLACE
PLUGINS
NEBULA - GLASS EFFECT (BLUR)
Nebula - Glass Effect (Blur) logo

Nebula - Glass Effect (Blur)

Published December 2025
   •    Updated December 2025

Plugin details

A clean and effortless glass-blur effect: just add nebula-blur-(number) to your element’s ID Attribute — and the effect works instantly, even with conditionals.


Nebula - Glass Effect (Blur)


 

 


Description

Overview

  • Nebula – Glass Effect (Blur) instantly applies a smooth frosted-glass background to any element using a simple ID pattern.

How It Works

  • Add an ID such as nebula-blur-12 to any element.
  • The plugin automatically reads the number, applies the blur level, and updates dynamically if the element is shown or hidden via conditionals.

When to Use

  • Perfect for cards, groups, headers, modals, and any UI block that needs a glassmorphic look with zero setup.

Benefits

  • Extremely simple — no fields to configure, no workflows needed.
  • Fully compatible with Bubble conditionals and visibility changes.
  • Lightweight and responsive on dynamic pages.

Key Features

  • Apply blur via ID only: nebula-blur-(number).
  • Automatic normalization of blur levels (1–100).
  • Real-time reapplication when the element changes state.

$40

One time  •  Or  $3/mo

stars   •   0 ratings
4 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Nebula logo
Nebula
Joined 2023   •   24 Plugins
View contributor profile

Instructions

Installation
  • Place any element on the page (Group, Floating Group, Shape, etc.).
  • In the ID Attribute field, type: nebula-blur-12 (replace 12 with your desired blur level).

Core Functionality

  • Reads the numeric preset from the element ID (pattern: nebula-blur-(number)).
  • Applies CSS variables --nb-blur and --nb-blur-num based on the parsed blur strength.
  • Renders a frosted-glass effect using a pseudo-element with backdrop-filter and a subtle tint.
  • Reapplies automatically when Bubble conditionals show/hide or modify the element.

Inputs

  • ID Attribute — set to nebula-blur-(number) to control the blur intensity.

Workflow Usage

  • No workflows required — the plugin handles everything automatically.
  • Use conditionals (e.g., “When this element is visible”) freely; the effect updates itself.

Best Practices

  • Use values between 8–20 for subtle glassmorphism; higher values create a stronger blur.
  • Apply to containers with readable text overlaid for best visual contrast.

Example Use Cases

  • Blurry navigation bars over colorful backgrounds.
  • Frosted cards and UI panels.
  • Modals and notification containers with glass aesthetics.

Troubleshooting

  • Blur not appearing:
    • Ensure the element has an ID like nebula-blur-12.
    • Make sure the Bubble ID Attribute feature is enabled in your app settings.
  • Effect too strong or too subtle:
    • Adjust the number in the ID (1–100).

Support

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Blog   •   Productivity   •   Mobile   •   Media   •   Containers

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble