Streaming live at 10am (PST)

Adding a Shadow on a section to create depth


#1

Hello there,

So I am trying to add a shadow upon my Intro Hero section in order to create an effect as if that section is above the section below, adding depth if that makes sense.

I’m still fairly new to Webflow so haven’t worked my way around the editor completely. I’ve tried just simply adding a shadow to the section but that doesn’t work. I’ve also tried adding a border to the bottom of the section to create a false sense of a shadow but that doesn’t look very good.

There’s no doubt in my mind it is possible whether that be through creating a div and placing it at the bottom of the section or something - I’m just not quite sure how I would go about this.

Thank you for anyone help you can provide!


Here is my site Read-Only: https://preview.webflow.com/preview/bold-website-design?utm_source=bold-website-design&preview=6a8a26e63548ad2701e59c2bd63c3bb5


#2

@JackShepherd That is actually the published webflow site… Please provide your read-only link…


#3

Sorry about that! Updated.


#4

@JackShepherd No worries. Give each section a z-index with the section at the top being the highest. You will then be able to see your box shadow that is applied to the section. Does that work for you?

You can see a slight shadow that I applied to your site :slight_smile:


#5

@sarahdarr That is perfect thank you! Do you mind telling me what the settings were on the box shadow you used? Colour, distance, size etc?


#6

@JackShepherd It looks like you already added a nice shadow to it. I like what you have done :slight_smile:


#7

Thank you. I’ll leave it at that then. Thanks for your help.