hypot()

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The hypot() CSS function is an exponential function that returns the square root of the sum of squares of its parameters.

While pow() and sqrt() only work on unitless numbers, hypot() accepts values with units, but they all must have the same type.

Syntax

css

/* A  value */
width: hypot(2em); /* 2em */
width: hypot(3em, 4em); /* 5em */
width: hypot(30px, 40px); /* 50px */
width: hypot(48px, 64px); /* 80px */
width: hypot(3px, 4px, 5px); /* 7.0710678118654755px */

Parameters

The hypot(x [, ...]#) function accepts one or more comma-separated calculations as its parameters.

x, x2, ..., xN: A calculation that resolves to a , , or .

Return value

Returns a , , or (based on the inputs), which is the square root of the sum of squares of its parameters.

If any of the inputs is infinite, the result is +∞.
If a single parameter is provided, the result is the absolute value of its input. hypot(2em) and hypot(-2em) both resolve to 2em.

Formal syntax

 = 
  hypot( # )  

 = 
   [ [ '+' | '-' ]  ]*  

 = 
   [ [ '*' | / ]  ]*  

 = 
          |
       |
      |
    |
  (  )  

 = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

Examples

Sizes based on hypot function

This example shows how you can use the hypot() function to calculate sizes.

HTML

html


  100px
  100px
  141.42px
  250px

CSS

Here we are using CSS custom properties to define the sizes to be used. First we declare the first size (--size-0) which is then used to calculate the other sizes.

--size-1 is calculated with the hypotenuse of --size-0 (100px). This takes the square value and, as there is no other value, returns the square root of the value, which results in 100px.
--size-2 is calculated with the hypotenuse of --size-0 (100px), twice. This takes the square of the value (100px * 100px = 10000px²) and adds it to the square of --size-0 again (10000px² + 10000px² = 20000px²) and returns the square root of the sum (√(20000px²)), which results in 141.42px.
--size-3 is calculated with the hypotenuse --size-0 * 1.5 (150px) and --size-0 * 2 (200px). The result is the square root of the sum of their squares: The values are squared (22500px² and 40000px²) and added together (62500px²), with the sum square-rooted (√(62500px²)) being 250px.

css

:root {
  --size-0: 100px;
  --size-1: hypot(var(--size-0)); /*  100px */
  --size-2: hypot(var(--size-0), var(--size-0)); /*  141.42px */
  --size-3: hypot(
    calc(var(--size-0) * 1.5),
    calc(var(--size-0) * 2)
  ); /*  250px */
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  width: var(--size-0);
  height: var(--size-0);
  background-color: tomato;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

The sizes are then applied as the width and height values of the selectors.

css

.one {
  width: var(--size-1);
  height: var(--size-1);
}
.two {
  width: var(--size-2);
  height: var(--size-2);
}
.three {
  width: var(--size-3);
  height: var(--size-3);
}

Result

Specifications

Specification
CSS Values and Units Module Level 4 # exponent-funcs