Better Shadows

How to integrate Better Shadows with Webflow

Better Shadows is a free Webflow app that writes a layered box-shadow value onto an element or an existing CSS class in one click, so a soft, physically plausible falloff takes a preset choice instead of a manual pass over every layer.

Worth being blunt about what the app does not do. Webflow handles layered shadows natively: you can stack multiple box shadows on any element from Style panel > Effects > Box shadows, and each layer carries its own type for inset or outset, X and Y distance, blur, size for spread, and color, with a per-layer visibility toggle and drag to reorder. The app is a generator, not a capability Webflow is missing. If a design needs one shadow or two, build them in the Style panel and skip the install. Better Shadows earns the install when you want a many-layered shadow that reads as real light falloff, because that is the version nobody wants to hand-tune across a component set.

Use the Better Shadows app

The app is published by Diego Toda de Oliveira, an independent Webflow developer, and its marketplace listing prices it at free with no external account or API key in the setup path. The listing carries Webflow’s app review badge, which the listing itself qualifies: Webflow reviews apps for quality and states plainly that it does not endorse or certify them.

The app comes down to four things.

• One-click presets: Choose a preset and the app applies the whole layered stack to the current selection, with no per-layer entry on your side.
• Existing class targeting: Point the app at a class already in use, and every element carrying that class picks up the same shadow.
• Preview background control: Change the preview color to check how a shadow reads on a pale section and on a dark one before committing it.
• Generated layer stacks: Shadows come from the open source smooth-shadow library, which exposes distance, intensity, sharpness, color, and light position rather than raw per-layer inputs.

Underneath, the app sets the box-shadow property on a Webflow style through the app extension API, where Webflow’s style properties reference lists box-shadow as a settable property. The output is ordinary CSS on your own class, not an app-specific element left behind on the canvas.

Keep shadow values in your design system

Shadows are usually the last thing anyone tokenizes, and Webflow’s variables only cover part of the job. Webflow lists shadows among the size variables you can bind, so offsets and blur radii can point at a token. Shadow color sits outside the documented color-variable targets, which run to text, backgrounds, borders and text strokes, and gradient stops. The app extension API draws the same line and types box-shadow as a string or a size variable. A generated stack therefore lands as literal values on the class, and recoloring the shadow later means editing the class rather than one variable.

That gap is the part worth handing to an agent. Webflow’s MCP server exposes styles and design systems as tools, so it can edit CSS properties on a class and move older styles onto design variables. Applying one shadow stack across every card class, or auditing which classes picked up a stray shadow, suits that far better than clicking through presets, and the MCP server is listed on the free Starter site plan, so nothing needs buying before you try it.

What you can build with Better Shadows Webflow integration

Once shadows live on CSS classes instead of individual elements, depth becomes something you adjust in one place and see everywhere.

Teams reach for the pairing in a few recurring situations.

• Elevation sets: Build a short run of shadow classes for surfaces at different heights, then hang cards, dropdowns, modals and popovers off them so depth stays legible.
• Hover state depth: Put a resting shadow on the class and a stronger one on the hover state, since Webflow supports effects on hover and other states from the states menu.
• Dark section checks: Use the preview background control to confirm a shadow still reads on a dark section before it goes out across the site.
• Design system reference sites: Give a component library one shadow class per tier, so the documentation demonstrates the same values the product ships.

Shadow values that have to change everywhere at once belong in variables rather than repeated presets, and Variables Bae generates size, color and typography variables for exactly that. When a shadow needs more than the Style panel exposes, see how to apply custom code programmatically across your pages.