Big Wordmark Footer — Free HTML CSS JS Oversized Brand Name Footer

An oversized brand wordmark as the last thing on the page is a closing statement more than a navigational element — the kind of moment agency and portfolio sites use to leave a visitor with one clear impression of the name before they leave. This snippet adds a second layer to that idea: the wordmark's gradient fill follows the cursor, so the giant letters catch light exactly like brushed metal or glass would under a moving spotlight.

Cutting a gradient into the shape of the text

The core technique is background-clip: text (with the -webkit- prefix for Safari) combined with color: transparent. Instead of colouring the text directly, .bwf-word paints a radial-gradient across its own background, then that background is clipped to exactly the shape of the letters — so what you see is the gradient showing through cut-out type, not a solid colour. Because the fill is a gradient rather than a flat colour, the letters can have a bright, glinting centre and a dark falloff at the edges, the same way real light behaves on a curved or reflective surface.

The gradient's centre is a variable, not a fixed value

The radial-gradient's position is var(--mx, 50%) var(--my, 20%) — two CSS custom properties with sensible defaults so the wordmark still looks intentional before any pointer interaction happens. A pointermove handler on the footer converts the cursor's position within the wordmark's bounding box into 0–100% fractions and writes them straight to those two custom properties. Because the gradient itself references the variables, updating two numbers is enough to move the entire highlight — there's no need to regenerate or replace the gradient string on every move.

A CSS transition, not a per-frame loop

transition: background-position .3s ease on .bwf-word smooths every custom-property update the JS makes, so despite the JavaScript only ever setting raw values with no easing logic of its own, the visual result glides rather than snapping. This is the same "let CSS interpolate, let JS just set the target" division of labour used throughout the snippet library's pointer-driven effects — the browser's transition engine already does the interpolation work, so there's nothing to reimplement in requestAnimationFrame.

Resting state, and why it's off-centre

On pointerleave, the custom properties reset to 50% 20% — horizontally centred, but with the highlight sitting slightly above true vertical centre. A perfectly centred glow at rest looks static and slightly clinical; nudging it upward gives the wordmark a subtle top-lit quality even when nobody's pointer is anywhere near it, so the resting state doesn't look like a bug waiting for interaction to "fix" it.