Working out the distance between two points in a UI has traditionally meant loading a JavaScript library and handing the main thread geometry that belonged in the stylesheet. CSS can do this itself now. The CSS hypot function runs the same arithmetic natively, with no script waiting in the middle.
In 14+ years of building WordPress sites I have lost count of the “layout hacks” that fake a diagonal length with absolute positioning and hand-calculated numbers. They hold up until someone resizes the window. hypot() keeps the measurement in the stylesheet, where it recalculates on its own.
What is the CSS hypot function?
The hypot() function is the Pythagorean theorem. Give it a comma-separated list of values and it squares each one, adds them together, and returns the square root. Two arguments is the common case, for a distance in 2D space, but it accepts as many values as you want to hand it.
.connector-line {
/* Calculates the hypotenuse of a triangle with 30vmin and 40vmin sides */
width: hypot(30vmin, 40vmin); /* Resolves to 50vmin */
}People used to fake this with sqrt() and pow(), and that is where it comes apart: CSS exponent functions like pow() only work with unitless numbers. Pass 16px into pow() and it fails. hypot() was written to take dimensions, so px, rem and % all work.
Practical use: simulating native interactions
Proximity detection is the use case I keep coming back to. Say you want a button to glow or scale up as the cursor gets close. That normally means a “magnetic button” script, which is rough on performance. You can instead push the mouse coordinates into CSS variables and let hypot() work out the distance from the center of the element.
/* Passing mouse X/Y via JS pointermove event */
:root {
--m-x: 0px;
--m-y: 0px;
}
.button-near-effect {
--btn-center-x: 50vw;
--btn-center-y: 50vh;
/* Calculate the distance from mouse to button center */
--distance: hypot(
calc(var(--m-x) - var(--btn-center-x)),
calc(var(--m-y) - var(--btn-center-y))
);
}
/* Using a Container Style Query to trigger effects */
@container style(--distance < 200px) {
.button-near-effect {
transform: scale(1.1);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
}A client once asked for a “parallax constellation” background on a WooCommerce checkout page, with every point reacting to the cursor. The JavaScript version produced a race condition between the DOM updates and the browser’s paint cycle, and the conversion rate dropped. If hypot() had existed then, I could have pushed that work to the GPU instead of spending a week debugging it.
Why not just use JavaScript?
Performance, mostly. Distance math in JavaScript usually lives inside a requestAnimationFrame callback or a scroll listener, and every pass can trigger another layout recalculation. Move it into hypot() and the browser gets to optimize the rendering path itself, which pays off more once other modern CSS features are in play.
I wrote more about front-end optimization in Modern CSS Patterns: Performance and Breakpoint Strategies.
Edge cases and gotchas
- Infinity: if any argument is
infinity, the result isinfinity. - Negative values:
hypot()squares its inputs, so-50pxresolves as positive. That is handy when you are measuring offsets from a center point. - Type consistency: you cannot mix incompatible types.
hypot(20px, 50%)is only valid in properties that accept both lengths and percentages, such aswidth.
If this sort of CSS is eating your dev hours, I can take it off your hands. I have been working on WordPress and awkward CSS architectures since the 4.x days.
The bottom line
hypot() is more than syntactic sugar. It lets you build reactive UIs that respond to geometry without carrying a 50KB JavaScript math library around. It comes from the CSS Values and Units Module Level 4 spec, and browser support is still filling in, so treat it as progressive enhancement for now.
