CSS sign() Function

CSS sign() Function

The CSS sign() function returns a number indicating whether a calculated value is positive, negative, or zero.

It returns 1 for positive values, -1 for negative values, and a signed zero for zero values. The function is useful for controlling directions, positioning elements, and adjusting CSS calculations without changing the magnitude of the original value.

Syntax

sign(expression)

The sign() function accepts one calculation and returns its sign as a numeric value.

Examples:

sign(25)
sign(-25)
sign(0)
sign(10px - 30px)
sign(var(--offset))

It is commonly used inside CSS mathematical expressions:

left: calc(40px * sign(-10));
transform: translateX(calc(50px * sign(5)));
margin-left: calc(20px * sign(var(--direction)));

The result of sign() is a number, so multiplying it by a length produces a length that can be used by properties such as left, margin-left, and transform.

The function can also be used without an additional calc() wrapper when the surrounding CSS value accepts the result.

Parameters

The sign() function requires exactly one argument.

The argument may contain numbers, compatible dimensions, percentages, mathematical operators, and other supported CSS math functions.

For example:

sign(15)
sign(-8)
sign(30px - 50px)
sign(5 * -2)
sign(calc(100px - 150px))

The function evaluates the completed calculation before determining whether its result is positive, negative, or zero.

It does not accept multiple comma-separated arguments.

Return Values

The sign() function returns a number representing the sign of its argument.

The function preserves the distinction between positive and negative zero. Although both normally appear as zero in visual calculations, their signs can affect certain mathematical operations.

Positive infinity returns 1, while negative infinity returns -1.

How It Works

The sign() function evaluates its argument and determines whether the final numeric value is greater than, less than, or equal to zero.

For example:

sign(40 - 60)

The calculation produces -20, so the function returns -1.

Similarly:

sign(60 - 40)

The calculation produces 20, so the function returns 1.

Consider this CSS:

.item {
  margin-left: calc(30px * sign(-15));
}

Because sign(-15) returns -1, the calculated margin is -30px.

Changing the argument to 15 produces a margin of 30px.

The magnitude of the input does not affect the result. Both sign(5) and sign(500) return 1.

Using sign() in Calculations

The sign() function is especially useful when a CSS calculation needs a direction rather than the original numeric magnitude.

Multiplying by a Length

.item {
  margin-left: calc(25px * sign(-10));
}

The resulting margin is -25px.

Controlling Translation

.item {
  transform: translateX(calc(60px * sign(10)));
}

The element moves 60px to the right.

Changing the argument to -10 moves the element 60px to the left.

Using a Calculated Difference

.item {
  --current: 30;
  --target: 50;
  transform: translateX(calc(40px * sign(var(--target) - var(--current))));
}

Because the target value is greater than the current value, the element moves 40px to the right.

If the target becomes smaller than the current value, the translation reverses.

Combining With Other Math Functions

.item {
  --offset: -75px;
  transform: translateX(calc(sign(var(--offset)) * min(abs(var(--offset)), 40px)));
}

The abs() function provides the positive magnitude, min() limits it to 40px, and sign() restores the direction.

The resulting translation is -40px.

Positive and Negative Values

The sign() function makes it possible to apply a fixed magnitude in either direction.

For example:

.item {
  --direction: -1;
  transform: translateX(calc(50px * sign(var(--direction))));
}

The element moves 50px to the left.

Changing the custom property to a positive value reverses the direction:

.item {
  --direction: 1;
  transform: translateX(calc(50px * sign(var(--direction))));
}

The element now moves 50px to the right.

When the direction is zero, the calculated translation is zero.

Unlike multiplying directly by an arbitrary input value, using sign() prevents a larger input from producing a larger translation.

For example, sign(-1), sign(-10), and sign(-100) all return -1.

sign() vs. abs()

The sign() and abs() functions both work with the sign of a numeric value, but they return different results.

Use sign() when the direction matters, and use abs() when the distance or magnitude matters.

The two functions can be combined when a calculation needs both pieces of information.

For example:

.item {
  --distance: -80px;
  transform: translateX(calc(sign(var(--distance)) * abs(var(--distance))));
}

The result is a translation of -80px.

This particular expression reproduces the original distance, but separating the sign and magnitude is useful when additional calculations must be applied to either part.

CSS Custom Properties

CSS custom properties can provide values that are evaluated by sign().

For example:

.item {
  --direction: -5;
  --distance: 40px;
  transform: translateX(calc(var(--distance) * sign(var(--direction))));
}

The element moves 40px to the left.

Changing --direction to a positive value moves it to the right without changing --distance.

Providing a Fallback

Use @supports when the layout must also work in browsers without sign() support.

.item {
  --direction: -1;
  transform: translateX(calc(40px * var(--direction)));
}
@supports (transform: translateX(calc(40px * sign(-1)))) {
  .item {
    transform: translateX(calc(40px * sign(var(--direction))));
  }
}

The fallback works when --direction is already normalized to -1, 0, or 1.

In supporting browsers, other positive or negative numeric values can also be used because sign() converts them to their corresponding direction.

Example

The following example uses sign() to position three boxes to the left, center, and right of their original positions.

HTML:

<div class="sign-demo">
  <div class="sign-item" style="--direction: -10;">Negative</div>
  <div class="sign-item" style="--direction: 0;">Zero</div>
  <div class="sign-item" style="--direction: 10;">Positive</div>
</div>

CSS:

.sign-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
}
.sign-item {
  width: 110px;
  padding: 12px 5px;
  color: #fff;
  background-color: #3498db;
  text-align: center;
  transform: translateX(calc(50px * sign(var(--direction))));
}
@supports not (transform: translateX(calc(50px * sign(-1)))) {
  .sign-item {
    transform: none;
  }
}

The negative value moves its box 50px to the left, the zero value leaves its box centered, and the positive value moves its box 50px to the right.

The function determines direction without using the original magnitude as the distance.

Browsers without support display the boxes in their original centered positions.

Positioning Example

The following example calculates a horizontal offset using a positive or negative direction value.

HTML:

<div class="position-demo">
  <div class="position-item" style="--offset: -25;">Left</div>
  <div class="position-item" style="--offset: 25;">Right</div>
</div>

CSS:

.position-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
}
.position-item {
  position: relative;
  box-sizing: border-box;
  width: 100px;
  padding: 12px;
  color: #fff;
  background-color: #2e86c1;
  text-align: center;
  left: 0;
}
@supports (left: calc(60px * sign(-1))) {
  .position-item {
    left: calc(60px * sign(var(--offset)));
  }
}

The first box receives a relative left offset of -60px, while the second receives 60px.

Relative positioning moves the boxes visually without removing them from the normal document flow.

Changing either direction value to another nonzero number with the same sign does not change the offset distance.

Transform Example

The following example combines sign() with abs() and min() to limit horizontal movement while preserving direction.

HTML:

<div class="transform-demo">
  <div class="transform-item" style="--offset: -80px;">-80px</div>
  <div class="transform-item" style="--offset: 20px;">20px</div>
  <div class="transform-item" style="--offset: 100px;">100px</div>
</div>

CSS:

.transform-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
}
.transform-item {
  box-sizing: border-box;
  width: 100px;
  padding: 12px;
  color: #fff;
  background-color: #16a085;
  text-align: center;
}
@supports (transform: translateX(calc(sign(-1) * 20px))) {
  .transform-item {
    transform: translateX(calc(sign(var(--offset)) * min(abs(var(--offset)), 40px)));
  }
}

The first box moves 40px left, the second moves 20px right, and the third moves 40px right.

The abs() function determines the positive distance, min() limits that distance to 40px, and sign() applies the original direction.

This approach is useful when a CSS value must stay within a maximum distance while retaining its positive or negative direction.

Common Uses

The sign() function is useful when CSS calculations depend on the direction of a value rather than its magnitude.

• Directional positioning: Move elements left or right based on a calculated sign.
• Transforms: Apply a fixed translation distance in a positive or negative direction.
• CSS custom properties: Convert numeric direction variables into -1, 0, or 1.
• Clamped movement: Combine sign(), abs(), and min() to limit movement while preserving direction.
• Calculated margins: Produce positive or negative offsets from numeric expressions.
• Dynamic styling: Change calculated values when CSS variables or other numeric inputs change.

For example, the following declaration creates a fixed directional offset:

.item {
  --direction: -3;
  margin-left: calc(20px * sign(var(--direction)));
}

The resulting margin is -20px.

If --direction changes to a positive value, the margin becomes 20px.

The function is most useful when the sign of a value is meaningful but its original magnitude should not control the result.

Limitations

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

• It requires exactly one calculation argument.
• It returns -1, 1, or a signed zero for ordinary finite numeric values.
• It does not return the original magnitude of the input.
• It returns a number rather than a length, angle, or percentage.
• When using the result for a length property, multiply it by a compatible length.
• Positive and negative zero remain distinguishable in CSS calculations.
• An argument that evaluates to NaN produces NaN.
• Calculations must use compatible CSS numeric types.
• Percentages may require resolution against a reference value before their sign is determined.
• Older browsers may not support the function.

Numeric Types

The following is valid because the argument is a compatible length calculation:

margin-left: calc(20px * sign(10px - 30px));

The result is -20px.

The following is invalid because the function does not accept two arguments:

margin-left: calc(20px * sign(10, 20));

Percentage Resolution

The sign of a percentage can depend on the property and the reference value used to resolve it.

For example, in certain background-position calculations, a positive percentage can resolve to a negative length when the background image is larger than the positioning area.

For predictable results, use explicit numeric or length calculations when possible.

Feature Detection

Use @supports to provide a fallback for browsers without sign() support.

.item {
  transform: translateX(-40px);
}
@supports (transform: translateX(calc(40px * sign(-1)))) {
  .item {
    transform: translateX(calc(40px * sign(var(--direction))));
  }
}

The fallback uses a fixed translation. Supporting browsers calculate the direction from the custom property.

Browser Support

The CSS sign() function has Baseline Newly available browser support since June 2025. It works across current major browsers, but older browser versions may not support it.

Support includes modern versions of Chrome, Edge, Firefox, and Safari.

For layouts that must support older browsers, provide a fallback declaration or use @supports to apply calculations involving sign() conditionally.

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

Specifications

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

The specification defines how the function evaluates its argument, returns the sign of the resolved value, and handles signed zero.

Related CSS mathematical functions include abs(), calc(), min(), max(), and clamp().