MARKETPLACE
PLUGINS
GLASSMORPHISM CSS GLASS EFFECT
Glassmorphism CSS Glass effect logo

Glassmorphism CSS Glass effect

Published July 2023
   •    Updated this week

Plugin details

This plugin enables you to effortlessly create exquisite frosted glass effects on any element. Glassmorphism, a CSS trend that leverages transparency and blur effects, imparts a glass-like appearance to elements. Our plugin offers a comprehensive solution for glassmorphism, allowing you to easily configure the desired blur, color, and transparency for various elements such as group containers, repeating groups, and shape elements.
Moreover, our plugin offers the flexibility to dynamically adjust blur, transparency, and color through workflows. This feature enables you to achieve stunning effects or create repeating groups with cells that possess distinct settings based on your database's data.

Rest assured that this plugin utilizes minimal JavaScript, CSS, and HTML, ensuring that it does not adversely impact the performance of your application.

Should you have any suggestions or require customizations or additional functionalities, please don't hesitate to reach out. We are delighted to assist you!


Demo and editor:

https://virtual-x-plugin-modules.bubbleapps.io/version-test/plug-in_glassmorphism

$5

One time  •  Or  $2/mo

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

Platform

Web

Contributor details

Hetyna Lab logo
Hetyna Lab
Joined 2022   •   6 Plugins
View contributor profile

Instructions

1. Navigate to the settings and open the General tab. Scroll down to the favicon section.
2. Enable the option to add ID Attributes to HTML elements.

3. Assign an ID to the desired element.

4. Add the "glass effect" element to your page. In the properties tab, specify the ID of the element you wish to apply the effect to. Additionally, set the color (remember to adjust the color transparency, preferably around 40%) and the blur (ranging from 1 to 20).

Tip: While configuring the element's properties for the desired effect, avoid setting the background color (keep it as "none") as it will be defined in the preceding step. However, you can customize the shadow and border settings here.

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Containers   •   Media   •   Technical   •   Productivity   •   Visual Elements

Resources

Support contact
Documentation

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble