CSS hypot() Function

CSS hypot() Function

The CSS hypot() function calculates the square root of the sum of the squares of one or more numeric values.

It is useful for calculating diagonal distances, element dimensions, and other measurements based on multiple values. Unlike sqrt(), the hypot() function accepts compatible CSS dimensions such as lengths and angles, as well as numbers and percentages.

Syntax

hypot(value)
hypot(value1, value2)
hypot(value1, value2, ...)

The function accepts one or more comma-separated calculations. All arguments must have compatible numeric types.

For example:

.box {
  width: hypot(30px, 40px);
}

The calculated width is 50px.

Additional examples:

width: hypot(3px, 4px);
width: hypot(60px, 80px);
width: hypot(5rem, 12rem);
width: hypot(30px);
width: hypot(-30px, 40px);
opacity: hypot(0.3, 0.4);

The function returns a numeric value whose type is determined by the compatible argument types.

For example, length arguments produce a length, while unitless numbers produce a number.

Parameters

The hypot() function accepts one or more arguments.

Arguments can resolve to the following numeric types:

All arguments must have a consistent type. Compatible units of the same dimension, such as px and rem, can be combined.

The resulting value must also be valid for the CSS property receiving it.

How It Works

The hypot() function squares each argument, adds the squared values, and calculates the square root of their sum.

The mathematical formula is:

hypot(a, b) = sqrt(a² + b²)

For example:

hypot(3, 4)

The calculation is:

3² + 4² = 9 + 16 = 25
sqrt(25) = 5

The result is 5.

With three arguments:

hypot(2, 3, 6)

The calculation becomes:

2² + 3² + 6² = 4 + 9 + 36 = 49
sqrt(49) = 7

The result is 7.

This calculation is commonly associated with the Pythagorean theorem, but the function supports any number of arguments.

Single Argument

When hypot() receives one argument, it returns the absolute value of that argument.

For example:

hypot(25px)
hypot(-25px)

Both expressions return 25px.

Additional examples:

hypot(10)
hypot(-10)
hypot(2rem)
hypot(-2rem)

The results are 10, 10, 2rem, and 2rem.

For a single argument, hypot() behaves similarly to abs().

For example:

width: hypot(-50px);
width: abs(-50px);

Both calculate a width of 50px.

Multiple Arguments

The hypot() function can calculate a combined magnitude from two or more values.

For example:

hypot(6, 8)
hypot(5, 12)
hypot(8, 15)
hypot(3, 4, 12)

The results are:

All arguments contribute to the result through their squared values.

The order of arguments does not affect the result.

For example:

hypot(30px, 40px)
hypot(40px, 30px)

Both return 50px.

Using Length Values

Unlike sqrt() and pow(), the hypot() function accepts CSS lengths directly.

For example:

.box {
  width: hypot(60px, 80px);
}

The result is 100px.

Compatible length units can be combined:

.box {
  width: hypot(2rem, 30px);
}

The browser resolves the lengths to compatible units before calculating the result.

The function also accepts calculated length expressions:

.box {
  width: hypot(calc(20px + 10px), 40px);
}

The result is 50px.

This makes hypot() useful for responsive measurements and geometry-based layouts.

Using Percentages

The hypot() function can calculate results from compatible percentage values.

For example:

.box {
  width: hypot(30%, 40%);
}

The mathematical result is 50%, which is then resolved according to the percentage rules of the width property.

Additional examples:

width: hypot(6%, 8%);
width: hypot(5%, 12%);
width: hypot(30%, 40%);

These produce 10%, 13%, and 50%, respectively.

Percentages can depend on a containing block or another property-specific reference value.

When mixing percentages with dimensions, the calculation must remain type-compatible and valid for the property.

For predictable examples, use percentages together or use compatible length values together.

Negative Values

Negative arguments are valid because each value is squared before the sum is calculated.

For example:

hypot(-3, 4)
hypot(3, -4)
hypot(-3, -4)

All three return 5.

The same applies to length values:

hypot(-30px, 40px)
hypot(30px, -40px)
hypot(-30px, -40px)

All three return 50px.

The result of hypot() is nonnegative for ordinary finite inputs.

This makes the function useful when calculating distances from positive or negative offsets.

Calculating Diagonal Distance

One of the most useful applications of hypot() is calculating the diagonal length of a rectangle.

For a rectangle measuring 120px wide and 160px high:

hypot(120px, 160px)

The result is 200px.

This follows the Pythagorean theorem:

120² + 160² = 14400 + 25600 = 40000
sqrt(40000) = 200

The function can also calculate the distance represented by horizontal and vertical translation values.

For example:

.element {
  transform: translate(120px, 160px);
}

The element moves 120px horizontally and 160px vertically. The straight-line distance between its starting and ending positions is 200px.

The corresponding calculation is:

hypot(120px, 160px)

The function calculates the distance, but it does not automatically move or measure an element.

Using Custom Properties

CSS custom properties can store the values used by hypot().

For example:

:root {
  --horizontal: 60px;
  --vertical: 80px;
}
.box {
  width: hypot(var(--horizontal), var(--vertical));
}

The calculated width is 100px.

Changing either custom property updates the result.

Custom properties can also store a calculated value:

.box {
  --diagonal: hypot(60px, 80px);
  width: var(--diagonal);
  height: 40px;
}

This makes the calculation reusable in multiple declarations.

For example:

.box {
  --diagonal: hypot(60px, 80px);
  width: var(--diagonal);
  max-width: var(--diagonal);
}

Custom properties are especially useful when several dimensions depend on the same measurements.

hypot() vs. sqrt()

The hypot() and sqrt() functions both involve square roots, but they accept different arguments.

For unitless values, these expressions are mathematically equivalent:

hypot(3, 4)
sqrt(3 * 3 + 4 * 4)

Both return 5.

However, hypot() can accept lengths directly:

width: hypot(30px, 40px);

This returns 50px without requiring the lengths to be converted to unitless numbers.

Use hypot() for combined magnitudes and diagonal distances. Use sqrt() for the square root of a single unitless calculation.

Example

This example compares fixed-width boxes with boxes whose widths are calculated using hypot().

HTML:

<div class="hypot-demo">
  <div class="hypot-demo-row">
    <span>100px</span>
    <div class="hypot-demo-bar hypot-fixed">100px</div>
  </div>
  <div class="hypot-demo-row">
    <span>hypot(60px, 80px)</span>
    <div class="hypot-demo-bar hypot-size-one">100px</div>
  </div>
  <div class="hypot-demo-row">
    <span>hypot(90px, 120px)</span>
    <div class="hypot-demo-bar hypot-size-two">150px</div>
  </div>
  <div class="hypot-demo-row">
    <span>hypot(120px, 160px)</span>
    <div class="hypot-demo-bar hypot-size-three">200px</div>
  </div>
</div>

CSS:

.hypot-demo {
  max-width: 420px;
  margin: 0 auto;
}
.hypot-demo-row {
  margin-bottom: 15px;
}
.hypot-demo-row > span {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}
.hypot-demo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  background-color: #0066cc;
  color: #fff;
  font-size: 13px;
}
.hypot-fixed { width: 100px; }
.hypot-size-one { width: 100px; width: hypot(60px, 80px); }
.hypot-size-two { width: 150px; width: hypot(90px, 120px); }
.hypot-size-three { width: 200px; width: hypot(120px, 160px); }

The first two bars are the same width because hypot(60px, 80px) equals 100px.

The remaining bars demonstrate how different pairs of length values produce larger results.

Each calculated width includes a fixed-width fallback for browsers that do not support hypot().

Diagonal Example

This example illustrates how hypot() calculates the diagonal of a rectangle.

HTML:

<div class="hypot-diagonal-demo">
  <div class="hypot-diagonal-rectangle">
    <span class="hypot-diagonal-line"></span>
    <span class="hypot-diagonal-label">200px diagonal</span>
  </div>
  <p>120px wide × 160px high</p>
</div>

CSS:

.hypot-diagonal-demo {
  text-align: center;
}
.hypot-diagonal-rectangle {
  position: relative;
  width: 120px;
  height: 160px;
  margin: 0 auto;
  border: 2px solid #0066cc;
  background-color: #eaf3ff;
  box-sizing: border-box;
}
.hypot-diagonal-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  width: hypot(120px, 160px);
  height: 2px;
  background-color: #dc3545;
  transform-origin: left center;
  transform: rotate(53.1301deg);
}
.hypot-diagonal-label {
  position: absolute;
  top: 65px;
  left: 5px;
  padding: 3px;
  background-color: #fff;
  color: #333;
  font-size: 11px;
}
.hypot-diagonal-demo p {
  margin: 10px 0 0;
  font-size: 13px;
}

The rectangle measures 120px by 160px, so its diagonal is 200px.

The red line uses hypot(120px, 160px) to calculate its width. The rotation angle is specified separately.

The demonstration uses fixed dimensions to make the relationship between the sides and diagonal easy to see.

Common Uses

The hypot() function is useful when a CSS value depends on the combined magnitude of multiple measurements.

For example:

.graphic {
  --x: 90px;
  --y: 120px;
  --distance: hypot(var(--x), var(--y));
  width: var(--distance);
}

The resulting width is 150px.

Limitations

The hypot() function has several important rules and limitations.

• At least one argument is required.
• Arguments must be separated by commas.
• All arguments must have compatible numeric types.
• The result is nonnegative for finite inputs.
• A single argument produces its absolute value.
• Different compatible length units can be combined.
• Incompatible types, such as a length and an angle, cannot be combined.
• The result must be valid for the property receiving it.
• The function calculates values but does not directly measure rendered elements.
• Older browsers may require a fallback value.

For example, this is valid:

width: hypot(30px, 40px);

The following is invalid because the arguments have incompatible types:

width: hypot(30px, 40deg);

The following is invalid because no arguments are supplied:

width: hypot();

The following is invalid because arguments are not comma-separated:

width: hypot(30px 40px);

Use compatible values and separate each argument with a comma.

Browser Support

The CSS hypot() function is Baseline Widely available. It has been supported across major browser engines since December 2023.

It works in current versions of Chrome, Edge, Firefox, Safari, and other modern browsers.

For example:

.box {
  width: hypot(60px, 80px);
}

For older browsers, provide a fallback before the calculated value:

.box {
  width: 100px;
  width: hypot(60px, 80px);
}

Browsers that do not recognize the function ignore the second declaration and retain the fallback width.

For current compatibility information, visit Can I Use? and search for CSS hypot().

Specifications

The hypot() function is defined in the CSS Values and Units Module Level 4 .

The specification defines its arguments, numeric type requirements, and calculation of the square root of the sum of squares.

Related CSS functions include sqrt(), pow(), abs(), calc(), and exp().