CSS sign() Function

The sign() function is a CSS math function that tells you whether a value is positive, negative, or zero.

Instead of returning the actual number you pass into it, sign() strips away the magnitude (the size of the number) and only returns its mathematical sign as a simple 1, -1, or 0.

Specifically, it returns:

1 if the value is positive.
-1 if the value is negative.
0 if the value is exactly zero.
-0 if the value is negative zero.

This can be handy when you're working with dynamic CSS variables and need to extract just the "direction" of a value. For example, you might have a variable that tracks horizontal movement. You don't care how far it moved, you just want to know if it moved left (negative) or right (positive) so you can flip an icon to face the correct way.

Here's an example where we use sign() inside a scaleX() transform. By passing a positive or negative variable into it, the element automatically flips to face the correct direction:

.sign-box {
    background-color: #ffc107;
    color: #000;
    font-weight: bold;
    font-size: 1.5em;
    height: 60px;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    
    /* 
      We use sign() to determine the scaleX multiplier.
      If --val is positive, scaleX(1) -> faces right.
      If --val is negative, scaleX(-1) -> faces left (flipped).
    */
    transform: scaleX(sign(var(--val)));
  }

/* Positive value: sign() returns 1 */
  .box-positive { 
    --val: 45px; 
  }

/* Negative value: sign() returns -1 */
  .box-negative { 
    --val: -120px; 
    background-color: #17a2b8;
    color: white;
  }
</style>

View Output Full Screen Preview

How It Works

The sign() function takes a single calculation as its argument. This can be a straightforward value (like sign(-50px)), a CSS variable (like sign(var(--my-val))), or a full mathematical equation.

Because the function always returns a unitless number (1, -1, or 0), it's perfect for properties that accept unitless multipliers, like scale, opacity, or flex-grow. If you need to use it for a property that requires a unit (like width or margin), you'll need to multiply it by a unit inside a calc() function.

Official Syntax

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

Possible Values

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

calc-sum: A mathematical calculation that resolves to a number, dimension (like a length or angle), or percentage. The function evaluates this calculation and returns 1, -1, 0, or -0 based on its sign.

CSS Specifications

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