How do I add a box shadow in Webflow?

Add the shadow from Effects

A box shadow draws a shadow outside or inside an element's rectangular boundary. Use it when a button, a card, a section, or another element should look slightly lifted, or when an inset edge should look pressed in.

Select the element on the canvas or in the Navigator. Open the Style panel, then Effects, then Box shadows. Add a shadow. Webflow's effects article says you set this on the element itself, and you can add the same kind of effect on Hover or another state later.

Example: a pricing card should sit above the page background. Select the card, not the heading inside it. A shadow on the heading only shades the type. A shadow on the card shades the whole card box.

Give that card its own class before you add the shadow. Every element that shares the class gets the same shadow. If only one card should lift, do not put the shadow on a class the whole page uses.

Set distance, blur, spread, and color

The effects article lists these controls:

• Type applies the shadow inside or outside the element's boundaries.
• X is the horizontal distance of the shadow.
• Y is the vertical distance of the shadow.
• Blur affects how focused the shadow blur is.
• Size is the spread of the shadow relative to the element.
• Color changes the color and the opacity of the shadow.

For a card on a light page, an outside shadow with X at 0, Y at 8, blur at 24, size at 0, and a dark color at low opacity is a clear starting point. Those numbers are an example, not a default Webflow applies for you. Raise Y if the card should feel higher. Raise blur if the edge should be softer. Size above 0 spreads the shadow past the box. Size below 0 pulls it in.

An inside type fits a field that should look inset. Keep the distances small so the text inside the field stays readable. If the shadow covers the label, lower the opacity or the blur.

Webflow's effects article says animated blurs are very slow and are not recommended. Do not animate the blur value to fake a hover. Change the shadow on the Hover state, and transition a property such as the shadow itself only if the result stays simple. The hover state guide is where that state is set.

Stack more than one layer

You can add more than one box shadow on the same element. A tight layer can define the edge, and a softer layer can add depth. In the effect settings, the eye icon hides a layer without deleting it. The trash icon deletes the layer you choose. Drag a layer to reorder it.

Example: the pricing card uses one outside shadow for the soft drop and a second outside shadow with blur at 0 and a 1px size to fake a hairline edge. Hide the hairline with the eye icon if the card is already on a busy photo. Publish only after you can still read the price.

A shadow is not spacing. It does not push the next section down. If the cards feel cramped, set margin or padding, or set a gap on the parent. The margin and padding guide is that space. Leave the shadow for the depth.

Keep a real focus outline

The effects article treats Outline as a separate control, meant for people who move through the page with a keyboard. Put a visible outline on the Focused state of a button or a link. Style, width, offset, and color are the outline controls.

Do not remove that outline and rely on a box shadow instead. A shadow can be hard to see on a photo, and it does not always show which control is active. If you set the outline style to None, Webflow's article warns that the outline disappears even when width, offset, or color are still set. Leave a visible focus style.

A card that is also a link needs the same care. The clickable card guide covers the link. Add the shadow on the card class, and check the focus outline on the link after you do.

Check the shadow on the published page

Designer canvas brightness and the live page are not always the same. Publish, then open the page on a desktop and on a phone.

Look for these misses:

• The shadow sits on the heading instead of the card.
• The color is so dark that the card looks muddy on a photo.
• Two layers stacked in the wrong order hide the softer shadow.
• The hover shadow snaps because no transition was set.
• A shared class added the shadow to every section, not only the card.

Fix the class or the layer, publish again, and look at the same card in daylight on your phone. A shadow you can see next to the type, without covering the price, is the one to keep.