# A trick to easily apply beautiful shadows (experimental)

**URL:** <https://forum.bubble.io/t/a-trick-to-easily-apply-beautiful-shadows-experimental/383977>\
**Category:** Tips\
**Created:** [October 26, 2025, 8:21pm UTC](https://forum.bubble.io/t/a-trick-to-easily-apply-beautiful-shadows-experimental/383977 "2025-10-26T20:21:46Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![nick23](https://avatars.discourse-cdn.com/v4/letter/n/76d3ee/32.png) [@nick23](https://forum.bubble.io/u/nick23)\
**Post date:** [October 26, 2025, 8:21pm UTC](https://forum.bubble.io/t/a-trick-to-easily-apply-beautiful-shadows-experimental/383977/1 "2025-10-26T20:21:46Z")

</div>

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).

 ![CleanShot 2025-10-26 at 15.40.11@2x](https://us1.discourse-cdn.com/bubble/original/3X/8/0/8032885cb37e3bd84d906ffd8f93c7452f81a142.png)\*\*  
\*\*  
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:

 ![CleanShot 2025-10-26 at 15.51.34@2x](https://us1.discourse-cdn.com/bubble/original/3X/a/2/a29d552fb0021d8f0e2ac6d53b374e84c574b13b.png)

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!

 ![CleanShot 2025-10-26 at 15.56.06@2x](https://us1.discourse-cdn.com/bubble/original/3X/e/2/e213b05d34632292dbbc4b5ba8883efe0f076f52.png)

**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.

 ![CleanShot 2025-10-26 at 16.26.30@2x](https://us1.discourse-cdn.com/bubble/original/3X/c/2/c2b435705e038355b13275611ffbb3cdae95e731.jpeg)

**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](https://rico.wtf/tools/bubble-colors-organizer) . This step isn’t required.

The shadow values are sourced from [Radix UI](https://www.radix-ui.com/themes/docs/theme/shadows).

> **[Bubble Editor - bubble-shadow-hack](https://bubble.io/page?id=bubble-shadow-hack&tab=Design&name=index)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.