CSS tan() Function

CSS tan() Function

The CSS tan() function calculates the tangent of an angle and returns a numeric value.

It is used in CSS mathematical expressions to calculate dimensions, offsets, and geometric relationships. The function accepts an angle or a number interpreted as radians, making it useful for layouts that depend on trigonometric calculations.

Syntax

tan(angle)
tan(number)

The tan() function requires one argument that represents an angle.

Examples:

tan(0deg)
tan(30deg)
tan(45deg)
tan(60deg)
tan(-45deg)
tan(0.125turn)
tan(0.785398rad)
tan(0.5)

The function returns a unitless number representing the tangent of the supplied angle.

It can be used directly where a number is accepted:

opacity: tan(30deg);

It can also be combined with a length to calculate dimensions:

width: calc(100px * tan(45deg));
height: calc(100px * tan(30deg));

Because tan() is a mathematical function, it can be nested inside calc(), clamp(), and other compatible CSS mathematical expressions.

Parameters

The tan() function accepts exactly one argument.

The argument may be a literal angle, a numeric value, a calculation, or a custom property containing a compatible value.

For example:

tan(45deg)
tan(0.125turn)
tan(0.785398rad)
tan(calc(15deg + 30deg))
tan(var(--angle, 45deg))

A unitless number is interpreted as an angle measured in radians.

For example:

tan(1)

This calculates the tangent of one radian, not one degree.

Lengths and percentages cannot be used directly as the argument.

Return Values

The tan() function returns the tangent of the supplied angle as a unitless number.

The tangent of 45 degrees is 1, making it convenient for calculations involving equal horizontal and vertical distances.

The tangent of 30 degrees is approximately 0.5774, while the tangent of 60 degrees is approximately 1.7321.

At odd multiples of 90 degrees, the mathematical tangent is undefined. CSS calculations at these angles can produce infinite values, which require special care.

How It Works

In a right triangle, the tangent of an angle is the ratio between the side opposite the angle and the side adjacent to it.

tangent = opposite / adjacent

For a 45-degree angle, the opposite and adjacent sides have equal lengths.

tan(45deg) = 1

For a 30-degree angle:

tan(30deg) ≈ 0.5774

This relationship can be used to calculate a vertical distance when the horizontal distance and angle are known.

For example:

.box {
  height: calc(100px * tan(30deg));
}

The resulting height is approximately 57.74px.

The function calculates the tangent of the angle. It does not rotate, skew, or otherwise transform an element by itself.

Angle Units

The tan() function accepts the standard CSS angle units.

The following expressions represent the same angle:

tan(45deg)
tan(0.125turn)
tan(50grad)
tan(0.25turn / 2)

Each returns 1, apart from possible insignificant floating-point differences.

A number without an angle unit is interpreted in radians:

tan(0.785398)

This produces a value approximately equal to 1 because 0.785398 radians is approximately 45 degrees.

Positive and Negative Angles

The tan() function accepts positive, negative, and zero angles.

Positive Angles

tan(30deg)
tan(45deg)
tan(60deg)

These angles produce positive tangent values.

Negative Angles

tan(-30deg)
tan(-45deg)
tan(-60deg)

These produce negative tangent values.

The tangent function is an odd function, meaning that reversing the sign of the angle reverses the sign of the result.

tan(-45deg) = -tan(45deg)

Zero Angle

tan(0deg)

The result is zero.

Angles Beyond 90 Degrees

The tangent function repeats every 180 degrees.

For example:

tan(45deg)
tan(225deg)

Both return 1.

However, the sign and magnitude of the result change as the angle passes through different quadrants.

Using tan() in Calculations

The tan() function can be combined with CSS arithmetic to calculate dimensions and offsets.

Calculating Height

.box {
  height: calc(100px * tan(30deg));
}

The calculated height is approximately 57.74px.

Calculating Width

.box {
  width: calc(80px * tan(45deg));
}

The calculated width is 80px.

Calculating an Offset

.box {
  margin-left: calc(100px * tan(15deg));
}

The calculated left margin is approximately 26.79px.

Combining With clamp()

.box {
  width: clamp(50px, calc(100px * tan(30deg)), 150px);
}

The calculated width is approximately 57.74px, which falls within the specified range.

Using calc()

.box {
  --angle: 30deg;
  --base: 100px;
  height: calc(var(--base) * tan(var(--angle)));
}

This calculates the height from a reusable base length and angle.

Because the tangent result is unitless, multiplying it by a CSS length produces a length suitable for properties such as width, height, and margin.

tan() vs. atan()

The tan() and atan() functions perform related but opposite calculations.

For example:

tan(45deg)

This returns 1.

The inverse calculation is:

atan(1)

This returns 45deg.

The atan() function returns angles within its principal range of -90 degrees to 90 degrees, excluding the endpoints.

Because tangent repeats every 180 degrees, atan() does not always recover the original angle outside that range.

Use tan() when an angle is known and a ratio is needed. Use atan() when a ratio is known and an angle is needed.

CSS Custom Properties

CSS custom properties can store angle values and lengths used in tangent calculations.

For example:

.box {
  --angle: 30deg;
  --base-width: 120px;
  height: calc(var(--base-width) * tan(var(--angle)));
}

The calculated height is approximately 69.28px.

Changing the angle to 45 degrees produces a height of 120px.

A fallback angle can also be supplied:

.box {
  height: calc(100px * tan(var(--angle, 30deg)));
}

If --angle is not defined, the calculation uses 30 degrees.

Custom properties make it easier to reuse geometric relationships across multiple elements.

Example

The following example uses tan() to calculate the heights of three boxes from different angles.

HTML:

<div class="tan-demo">
  <div class="tan-item" style="--angle: 15deg;">15deg</div>
  <div class="tan-item" style="--angle: 30deg;">30deg</div>
  <div class="tan-item" style="--angle: 45deg;">45deg</div>
</div>

CSS:

.tan-demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 25px;
  padding: 25px 15px;
}
.tan-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  color: #fff;
  background-color: #3498db;
}
@supports (height: calc(100px * tan(30deg))) {
  .tan-item {
    height: calc(100px * tan(var(--angle)));
  }
}

In supporting browsers, the boxes have calculated heights of approximately 26.79px, 57.74px, and 100px.

Each box uses the same CSS calculation with a different angle supplied through a custom property.

Browsers without tan() support use the fallback height of 100px.

Offset Example

The following example calculates horizontal offsets using the tangent of different angles.

HTML:

<div class="tan-offset-demo">
  <div class="tan-offset-row">
    <div class="tan-offset-box" style="--angle: 15deg;">15deg</div>
  </div>
  <div class="tan-offset-row">
    <div class="tan-offset-box" style="--angle: 30deg;">30deg</div>
  </div>
  <div class="tan-offset-row">
    <div class="tan-offset-box" style="--angle: 45deg;">45deg</div>
  </div>
</div>

CSS:

.tan-offset-demo {
  display: grid;
  gap: 12px;
}
.tan-offset-row {
  padding: 8px;
  background-color: #f1f3f5;
}
.tan-offset-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 45px;
  color: #fff;
  background-color: #16a085;
}
@supports (transform: translateX(calc(100px * tan(30deg)))) {
  .tan-offset-box {
    transform: translateX(calc(100px * tan(var(--angle))));
  }
}

The boxes are translated approximately 26.79px, 57.74px, and 100px to the right.

The tan() function calculates the numeric ratio, while translateX() performs the horizontal movement.

The transformation does not change the original layout space occupied by each box.

Right Triangle Example

The tangent function can calculate the height of a right triangle when its base length and one acute angle are known.

For a base of 200px and an angle of 30 degrees:

height = 200px * tan(30deg)

The calculated height is approximately 115.47px.

HTML:

<div class="tan-triangle-demo">
  <div class="tan-triangle"></div>
  <p>Base: 200px | Angle: 30deg</p>
</div>

CSS:

.tan-triangle-demo {
  padding: 20px;
  text-align: center;
}
.tan-triangle {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 200px solid #3498db;
  border-top: 115.47px solid transparent;
}
@supports (border-top-width: calc(200px * tan(30deg))) {
  .tan-triangle {
    border-top-width: calc(200px * tan(30deg));
  }
}
.tan-triangle-demo p {
  margin-top: 15px;
}

The triangle's horizontal base is 200px, and its vertical height is calculated from the tangent of 30 degrees.

The border technique creates a triangular shape without an image.

This example demonstrates a practical geometric relationship that can be expressed directly in CSS.

Common Uses

The tan() function is useful when CSS values depend on an angle and a geometric ratio.

• Geometric layouts: Calculate dimensions using known angles.
• Diagonal designs: Determine offsets for slanted edges and decorative shapes.
• Right triangles: Calculate the opposite side from an adjacent side and an angle.
• Element positioning: Calculate translation distances from angles.
• Responsive components: Combine trigonometric calculations with CSS custom properties.
• Mathematical sizing: Use tangent values in width, height, margin, and padding calculations.
• Custom geometry: Combine tangent with other trigonometric functions.

For example:

.panel {
  --angle: 20deg;
  --base: 150px;
  padding-top: calc(var(--base) * tan(var(--angle)));
}

The calculated top padding is approximately 54.60px.

Changing the angle automatically changes the calculated spacing.

Limitations

The tan() function has several requirements and behaviors to consider.

• It requires exactly one argument.
• The argument must be an angle or a number interpreted as radians.
• Lengths and percentages cannot be used directly as arguments.
• The result is a unitless number.
• Angles near odd multiples of 90 degrees produce extremely large tangent values.
• The mathematical tangent is undefined at odd multiples of 90 degrees.
• CSS calculations at undefined tangent angles may produce infinite values.
• Floating-point calculations may produce small rounding differences.
• It does not transform an element by itself.
• Calculated results must be compatible with the CSS property receiving them.
• Older browsers may not support CSS trigonometric functions.

Valid and Invalid Values

These expressions are valid:

tan(30deg)
tan(-45deg)
tan(0.125turn)
tan(0.5)
tan(calc(15deg + 30deg))

The following is invalid because the argument is a length:

tan(30px)

The following is invalid because the function accepts only one argument:

tan(30deg, 45deg)

Angles Near 90 Degrees

As an angle approaches 90 degrees from below, its tangent increases without bound.

For example:

tan(80deg)
tan(85deg)
tan(89deg)

These return increasingly large positive numbers.

Immediately beyond 90 degrees, the tangent becomes a large negative number.

Avoid angles near these discontinuities when calculating ordinary dimensions or spacing.

Feature Detection

Use @supports to provide fallback values in browsers without tan() support.

.box {
  height: 58px;
}
@supports (height: calc(100px * tan(30deg))) {
  .box {
    height: calc(100px * tan(30deg));
  }
}

Supporting browsers calculate the height using tan(). Other browsers retain the fallback height of 58px.

Browser Support

The CSS tan() function is Baseline Widely available and is supported in modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

CSS trigonometric functions became interoperable across major browser engines in 2023. Older browser versions may not recognize the function.

When a tangent calculation is essential to a layout, provide a fallback value and use @supports to apply the calculation in supporting browsers.

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

Specifications

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

The specification defines its argument type, numeric result, and behavior for special values.

Related functions include sin(), cos(), asin(), acos(), atan(), atan2(), and calc().