Smooth Hover Underlines in Webflow (Box-Shadow)

By the end of this lesson you’ll be able to build smooth, growing hover underlines in Webflow — the elegant kind that slide in from the bottom, top, left, or right, or fill the whole height of the text — all with box-shadow and a couple of transitions, and zero custom code.

The trick behind every variation is the same: don’t use a real border. A border adds to the element’s box, so animating it shoves everything around it. A box-shadow, by contrast, is painted outside the layout box — it can grow and shrink without disturbing a single neighbor. Learn the one base setup and the other six effects are just a tweaked offset.

I demo it on links because they’re the natural fit, but the exact same logic works on a link block, a container, a section — any element you like.

How it works

The base effect — a line growing from the bottom — is built in three moves. First, style the link: set its color to inherit (so it isn’t stuck the default link-blue) and remove the default underline with text-decoration: none. Second, add an inset box-shadow with every value (X, Y, blur, size) at zero and the color set to whatever you want the underline to be. Third, transition the box-shadow — a fairly long 600ms with ease-out cubic is what makes it feel smooth (you can transition color the same way). Then in the hover state, nudge the shadow’s Y offset to a small negative value like -1vw. That’s the whole effect: the invisible zero-size shadow grows into a crisp underline sliding up from the bottom.

Once that clicks, direction is just an offset. Flip the hover Y to positive 1vw and the line grows from the top instead. Move the value to the X axis — positive 1vw grows it from the left, negative 1vw from the right. The only extra step for the horizontal versions is adding a bit of matching padding (left or right) so there’s actually room for the line to appear beside the text.

The full-height fill looks fancier but uses the same Y offset — the only question is how tall to make it. You can’t use a percentage here, so the value comes from the font: multiply the font-size by a unitless line-height. With font-size: 7vw and line-height: 1.5, that’s 7 × 1.5 = 10.5vw, so the hover Y offset is -10.5vw (positive for a top fill). If your line-height already has a unit (px, em…), just use that value directly. Two finishing touches: add horizontal padding so the fill has breathing room, and switch the text color to something contrasting (like white) on hover — otherwise the text disappears into the shadow.

Finally, the multi-line bonus is just the base idea applied twice. Add two inset shadows in the normal state, then on hover give them opposite offsets — one 1vw, one -1vw — to animate top and bottom together. Move those to the X axis for left and right. Same mechanism, more sides. Every one of these effects is pure box-shadow and transitions — no custom code anywhere.

How to use it

1. Style the link — set color: inherit and text-decoration: none so it takes the body color and loses the default underline.
2. Add the base shadow — an inset box-shadow with X, Y, blur, and size all at 0 and the color set to your accent (e.g. Webflow blue).
3. Add the transition — transition box-shadow at ~600ms, ease-out cubic (optionally color too, same values).
4. Set the hover — in the hover state, change the box-shadow’s Y offset to -1vw for a bottom underline. That’s the classic effect done.
5. Change direction — flip Y to +1vw for top, or move the value to the X offset (+1vw left, -1vw right); for left/right, add matching padding so the line has room.
6. Make it full-height — set the hover Y offset to font-size × line-height (e.g. 10.5vw for 7vw × 1.5), add horizontal padding, and switch the text color to a contrasting one on hover.
7. Animate multiple sides — add two inset shadows in the normal state and give them opposite offsets on hover (top + bottom, or left + right).

That’s a whole collection of hover underlines from one idea: an inset shadow you reveal with a transition. Master the base setup and every variation is a two-second tweak.