CSS tan() Function

The tan() function is a CSS math function that calculates the tangent of a given angle.

In trigonometry, the tangent of an angle in a right triangle is the ratio of the opposite side to the adjacent side. When you use the tan() function in CSS, you provide it with an angle (like 45deg, 1rad, or 0.125turn), and it returns a unitless number.

For example:

tan(0deg) returns 0
tan(45deg) returns 1
tan(135deg) returns -1

Note: Because the tangent of 90 degrees approaches infinity, passing 90deg or 270deg into the function will return an infinitely large number, which may cause layout issues. It's best to avoid these exact angles when using tan().

So, when would you actually use this? The tan() function is perfect for calculating an unknown dimension. For instance, if you know the width of a box and the angle of a diagonal line cutting across it, you can use tan() to calculate exactly what the height of that box needs to be.

Here's an example demonstrating this concept. We have a box with a fixed width of 200px. We want to draw a diagonal line at a specific angle (like 30 degrees). By multiplying the width by the tangent of that angle, the browser calculates the exact height required to make the diagonal line fit perfectly from corner to corner:

.tan-box {
    position: relative;
    background-color: #e9ecef;
    border: 2px solid #6c757d;
    width: var(--base-width);
    
    /* 
      Calculate the unknown height using tan().
      Formula: Height = Width * tan(Angle)
    */
    height: calc(var(--base-width) * tan(var(--angle)));
    
    transition: height 0.5s ease;
    cursor: pointer;
  }

.diagonal-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%; /* Make it extra long so it covers the distance */
    height: 2px;
    background-color: #0d6efd;
    transform-origin: bottom left;
    
    /* Rotate the line to match our angle */
    transform: rotate(calc(var(--angle) * -1));
    transition: transform 0.5s ease;
  }
  
  .label {
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: sans-serif;
    font-size: 0.85em;
    font-weight: bold;
    color: #343a40;
  }

/* Change the angle on hover to see the height recalculate */
  .tan-container:hover .tan-box {
    --angle: 45deg;
  }
</style>

<div class="tan-container">
  <div class="tan-box">
    <div class="diagonal-line"></div>
    <div class="label">Hover to change angle</div>
  </div>
</div>

View Output Full Screen Preview

How It Works

The tan() function takes a single calculation as its argument. This argument should resolve to an angle. If you provide a unitless number instead of an angle, the browser will treat it as radians (so tan(1) is evaluated as 1 radian).

Because the function returns a unitless number, you'll usually need to multiply it by a length unit (like px or rem) inside a calc() function to apply it to sizing properties.

Official Syntax

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

Possible Values

As indicated in the official syntax, the tan() function accepts the following value:

calc-sum: A mathematical calculation that resolves to an angle or a unitless number. The function evaluates this input and returns the corresponding tangent value as a unitless number.

CSS Specifications

The tan() 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.