How to add really cool shadows to your Bubble elements

Jun 21, 2022

Here is a short issue on applying really cool shadows to your Bubble elements.

Creating cool shadow effects in Bubble is hard. At least if you rely on the standard Bubble editor. And usually, they end up looking, well, like you made them in Bubble. But the good news is that we can apply really cool shadows using a few lines of CSS. So, let’s go:

1. Install the Classify Plugin.

2. In your Bubble app, go to Settings / General and check ‘Expose the option to add an ID attribute to HTML elements’.

3. Put an HTML element somewhere on the page. If you want to be sure it does not interfere with your layout, just put it in a separate popup. Copy + Paste the following code into it.

<style>

.shadow6 {

box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;

}

</style>

4. Go to https://getcssscan.com/css-box-shadow-examples and find a shadow you like and click on it. This copies the respective CSS code to your clipboard. Use it to replace the box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px part in the code above. Make sure you keep the !important; at the end of the line.

In the element you want to apply the shadow to, add the following code to the ID Attribute field.

{addClass: "shadow6"}

That’s basically it. Go ahead and preview your page. You can also apply shadows using conditions (e.g. on hover or on click). See my setup here for how to do that (see the ID attributes and conditions on ‘Group Card cool shadow’).