Hi Ryan, 

At this time you aren’t able to add a shadow natively in the app, but if you’re crafty with an image editing program (photoshop, pixlr) then you should be able to make this work. Essentially it would require you to make an appropriately sized drop shadow image in Photoshop (or another image editing program). All you would need to do is then upload that image to your Unbounce landing page and place it behind the text box to create the appearance of an outer glow.

As for the text shadow, you’ll need to add a bit of custom CSS in order to get this to work. Basically, drop the code below into your page CSS and replace the  #lp-pom-text-248  with the appropriate property ID. 

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

Hi Ryan,

At this time you aren’t able to add a shadow natively in the app, but if you’re crafty with an image editing program (photoshop, pixlr) then you should be able to make this work. Essentially it would require you to make an appropriately sized drop shadow image in Photoshop (or another image editing program). All you would need to do is then upload that image to your Unbounce landing page and place it behind the text box to create the appearance of an outer glow.

As for the text shadow, you’ll need to add a bit of custom CSS in order to get this to work. Basically, drop the code below into your page CSS and replace the #lp-pom-text-248 with the appropriate property ID.

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

Hey! I know this is an old topic, but how can I implement drop shadow to buttons?

I tried following code, but didn’t work:

Thanks 🙂

You were almost there! Try this –

<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); !important;}

#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); !important;}

#lp-pom-button-728:hover {box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); !important;}

</style>

When I implement this code I only see the shadow when I hover on the button. How do I need to customize the code to see the shadow on the “up” and “active” states?

check this…css drop shadow tutorial