[PLUGIN] - Liquid Glass

Plugin builders
1

Hi all,

Here is a liquid glass plugin that you can use to turn any Bubble element into what you see on this page below.

Demo:
https://paul-testing.bubbleapps.io/version-test/liquid_glass

Plugin:
Liquid Glass Plugin | Bubble

image
image984×628 86.7 KB

The instructions for this are outlined below (there isn’t that many) :slightly_smiling_face:

image
image530×630 17.3 KB

Attribute ID
This is the attribute ID which has been assigned to the element to apply the liquid glass effect to. You can also supply a comma separated list of attribute ID’s here if you want to target multiple elements, in doing so will apply all the same CSS values to each element (including the border radius).

Shadow blur
This option controls the blur radius of the inner shadow. A higher value will result in a more blurred shadow. You can leave this with the default value if you prefer, and use the Bubble properties on the element.

Shadow spread
This option controls the spread of the inner shadow. A negative value will cause the shadow to shrink, while a positive value will cause it to grow. You can leave this with the default value if you prefer, and use the Bubble properties on the element.

Shadow color
This option controls the color of the inner shadow. You can leave this with the default value if you prefer, and use the Bubble properties on the element.

Border radius**
This option controls the roundness of the border. You should also set the Bubble element to this same value.

Frost blur
This option controls the blur radius of the background frost effect.

Noise frequency
This option controls the frequency of a noise effect, which is used to create a subtle texture or pattern on the element.

Distortion strength
This option controls the amount of distortion applied to the element, giving it a sense of movement or ripple.

ACTIONS

  • Start color transition - (starts a color transition effect)
  • Stop color transition - (stops a color transition effect)

All options can be adjusted dynamically and change the properties of the elements apply immediately if any values change.

Hopefully it will add a nice touch to any websites out there.

Paul

2 Likes
2

Nice!