Hi guys, I’ve not seen anyone on the forum post this yet, so I thought I’d share a little trick I use to apply beautiful multi-layer shadows to my groups and elements.
Problem
Bubble doesn’t currently provide a simple way to apply multiple shadows to an element. To do so, you’d typically need to use custom CSS along with the Classify plugin. However, doing this for each element can be tedious. I started wondering if there was a way to make applying shadows as easy as selecting a color style. After exploring how Bubble manages shadow colors, I discovered that it’s actually possible to apply multiple shadows easily by leveraging the box-shadow color property.
Please note that this is experimental and should not be used for production purposes without adequate testing. So far, I’ve only tested it on Safari and Chrome.
How it works
Below is how the boxshadow color variable is normally applied if you used a color style (here, I used 10% opacity hence the 0.1 at the end).
**
You can actually use the following CSS syntax to define a custom box-shadow color variable that overrides the original boxshadow and apply your custom CSS:
--color_bTHAO_default: rgba(0,0,0,0), inset 0 0 0 1px #0009321f, inset 0 1.5px 2px 0 #00005506, inset 0 1.5px 2px 0 #0000001a !important;
The rgba(0,0,0,0) part at the front is used to negate the original box shadow properties that were set in the bubble element editor.
This will result in the box-shadow value below:
With this, you can easily apply shadows to elements by setting the boxshadow color to your color style tied to the custom CSS variable – no need to mess with the default horizontal offset, vertical offset, blur radius, and spread radius since they will be overridden by your custom CSS!
Result
Below is the result of layering multiple shadows on an element. The difference is subtle, but if you’re as obsessed with making things look elevated and polished like I am 
, it might be worth the extra effort.
Editor
Here’s the link to the editor if anyone is interested in the implementation.
Note: I’ve renamed the color variables to shadow_2xs, shadow_xs, etc., using a small hack with @rico.trevisan ‘s tool Ricowtf · rico.wtf . This step isn’t required.
The shadow values are sourced from Radix UI.