1. Documentation
  2. Pro Tips and Scripts
  3. Media & Embeds

Does Unbounce support drop shadows?

Follow
Avatar
christina spadavecchia
Last Updated

Unbounce does not add drop shadows through the builder interface, but you can apply them with a small amount of custom CSS. This works for any element that has an ID, such as a button, box, or text element.

This uses custom CSS and is not an official builder feature. Add the code to your page or in the JavaScript/CSS section, and replace the sample element IDs with your own.

Add a shadow to an element

Use the box-shadow property, targeting the element's ID. This example adds the shadow on hover, so it appears when a visitor moves their cursor over a button:

<style>
#lp-pom-button-723:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>

To apply the shadow at all times rather than only on hover, remove the :hover from the selector.

Add a shadow to text

For a text element, use the text-shadow property instead:

<style>
#lp-pom-text-248 {
  text-shadow: 1px 1px 1px #000;
}
</style>

To find an element's ID, publish the page and inspect the element in your browser's developer tools. The ID follows the pattern lp-pom-button-, lp-pom-box-, or lp-pom-text- with a number.

Related articles