CSS hypot() Function

The hypot() function is a CSS math function that calculates the square root of the sum of the squares of its arguments.

If you remember the Pythagorean theorem from math class (a² + b² = c²), this function does exactly that. It finds the length of the hypotenuse of a right-angled triangle. In practical web design terms, if you provide the width and height of a box as arguments, hypot() will return the exact length of the diagonal line stretching from one corner to the opposite corner.

This is highly useful when you need to size a background element to perfectly cover a container during a radial animation, or when you want to draw a line that connects two points across a fluid layout.

Here's an example where we use CSS custom properties to define the width and height of a box. We then use hypot() to set the exact width of a line so it stretches perfectly from corner to corner. We're also using the atan2() function to calculate the correct rotation angle.

.diagonal-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background-color: #dc3545;
    transform-origin: top left;
    
    /* 
      1. Use hypot() to calculate the exact diagonal length.
      2. Use atan2() to calculate the exact angle to point to the bottom-right corner.
    */
    width: hypot(var(--box-width), var(--box-height));
    transform: rotate(atan2(var(--box-height), var(--box-width)));
  }
  
  .label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-family: sans-serif;
    font-size: 0.9em;
    color: #6c757d;
  }
</style>

<div class="hypot-container">
  <div class="diagonal-line"></div>
  <div class="label">Width: 300px | Height: 150px</div>
</div>

View Output Full Screen Preview

How It Works

The hypot() function accepts one or more comma-separated calculations. While it's most commonly used with two arguments (for 2D layouts), you can pass three arguments if you're working with 3D coordinates (X, Y, and Z), or even more.

All arguments passed into the function must resolve to the same type of value. For example, you can mix different length units like px and rem (because they are both lengths), but you cannot mix a length with an <angle> or a <time> value.

The hypot() function evaluates mathematical expressions automatically (similar to the calc() function). So you can write equations directly inside the parentheses, like hypot(var(--w) * 2, 100px).

Official Syntax

The official syntax of the hypot() function is as follows:

Possible Values

As indicated in the official syntax, the hypot() function accepts the following values:

calc-sum: A comma-separated list of mathematical calculations. These must all resolve to the same type (such as lengths, numbers, or percentages). The function squares each value, adds them together, and returns the square root of the total.

CSS Specifications

The hypot() function is defined in CSS Values and Units Module Level 4 (Editor's Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.