Mathematical functions.

Mathematical calculation functions in CSS.

Main calculation functions.

Determination or change of sign:

  • abs() : Calculates the absolute value of a number.
  • sign() : Determines the sign of a number.

Exponential and logarithmic calculation functions:

  • sqrt() : Calculates the square root of a number.
  • exp() : Calculates the exponential of a number.
  • pow() : Calculates a power boost.
  • log() : Calculates the logarithm of a number.
  • hypot() : Calculates the square root of a sum of squares of numbers.

Searching for extreme values:

  • min() : Determines the smallest value among a series of values.
  • max() : Determines the largest value among a series of values.
  • clamp() : Calculates a value between two extreme values.

Rounding calculations:

  • round() : Calculates the rounding of a number.
  • mod() : Calculates the remainder of the integer division between two numbers.
  • rem() : Calculates the remainder of the integer division between two numbers.

Trigonometric calculation functions:

Expression evaluation:

  • calc() : Performs a calculation. Can be used in place of a value for a property.
  • var() : Retrieves the value of a custom property (variable).

See also the trigonometric functions and predefined mathematical values pages.

These features can be used with:

These functions can be used with any properties that expect a numeric value, or be part of an expression evaluated by the calc() function.

However, be careful with the type matching: the type of the value returned by the function must match the data type awaited by the property. CSS is pretty strict on data types: for example, an integer numeric value like 200 is not interchangeable with the 200px dimension.

Syntax of mathematical calculation functions.

  • <propriété>: abs(200px); a

    Calculate the absolute value of the number a. The returned value is of the same type as the a value. In our example, the value a is a dimension (expressed in pixels), so the result of the function will also be a dimension, and can be used with all properties that expect a dimension.

  • <propriété>: exp(200); a

    Calcule e to the exponent a. In other words, this function is equivalent to pow(e,a).
    e and a must be unitless numbers. The result of the function is also unitless.

  • <propriété>: hypot(200px, 150px, ...); a b

    The hypot() function expects a series of values, which can be unitless or with a unit, but all units must be of the same type (as dimensions for example).

    hypot() (short for hypotenuse) calculates the square root of the sum of the squares of its arguments. For example, hypot(3px, 4px) is sqrt(3px² + 4px²); i.e. 5px.

    If only one value is provided, the syntax is correct but hypot() only returns the absolute value, that is, gives the same result as abs().

    If two values are provided, hypot() calculates the length of the hypotenuse of a right triangle whose sides measure dimensions a and b, respectively. If more values are provided, the calculation is the same, but on figures with 3, 4 or more dimensions.

    Hypotenuse of a right triangle

    Example of use.

    This row of trees was obtained by shifting the 2nd and 3rd trees more or less to the right and upwards. This is easy to achieve with the translate property. Nevertheless, the effect is not convincing because, in order to recreate perspective, The size of trees should decrease according to their distance.

    Example with the hypot() function

    Reducing the size of trees is easy with the scale property, but the reduction coefficient must be proportional to the size of the distance from which the tree was moved. The hypot() function simplifies this calculation.

    Exemple with the hypot() function

    Here we show you a simulation because few browsers handle the hypot() function, but here's what would be the styles to achieve this. The number 8 was chosen empirically.

    #arbre2 { translate:5px -10px; scale:calc(8 / hypot(5px, 10px); } #arbre3 { translate:20px -20px; scale:calc(8 / hypot(20px, 20px); }
  • <propriété>: log(200); <propriété>: log(200, 3); a b

    Calculate the logarithm of a in base b. If b is omitted, the function calculates the logarithm of a at base e.
    The two numbers a and b must be specified without a unit. The result is also unity-free.

  • <propriété>: pow(200, 2); a b

    Calculates a raised to the power of b.
    For example, exp(2,3) returns 8.
    a and b are numbers without unit. The result of the function is also a number unitless.

  • <propriété>: sign(200px); a

    Returns -1 if the value a is negative, 1 if a is positive, or returns 0 if a is 0.
    The value a can be of any numerical type; In our example, this is a dimension.

    The sign() function considers the calculated value, which can yield surprising results if the value is specified with a relative unit such as the percentage. For example, 50% is indeed a positive value but can, after calculation, give a negative result.

  • <propriété>: sqrt(200); a

    Calculate the square root of the number a.
    a is a positive number, with no units, as is the result calculated by sqrt().

Simulator.

This simulator is especially interesting for identifying the mathematical functions recognized by your current browser.

Of course, there must be a match between the type of value expected by the property and the type of value returned by function. For example, trigonometric functions such as sin() or cos() return a number unitless between 0 and 1: these functions can be used for example with the scale that expects a unitless value.
For this reason, the simulator uses three properties: width which expects one dimension, scale for numbers without units, and rotate for functions that return an angle.


width :

scale :

rotate :

width:auto
scale:1
rotate:0deg

Support for mathematical functions by browsers.

Mathematical functions are now well recognized by browsers. There are still some problems with sign() and clamp() but which should be solved quickly by browsers.

The tables below are very general. Refer to the calc() and var() functions for more details on their degree of compatibility with browsers.
See also the compatibility of trigonometric functions.

General calculation functions.

Column 1
Support for calculations in CSS, and the function calc() to evaluate an expression.
Column 2
Support for custom properties (variables) and the var() function that allows retrieving their value.

Notes:

(1) The function calc() is bugged in Internet Explorer.

1
calc()
function
2
var()
function
3
abs()
function
4
sign()
function
5
min() max()
and clamp()
functions
Estimated overall support.
96%
96%
19%
19%
95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

KaiOS Browser

Samsung Internet

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

Chrome

Opéra

Opéra Mobile

UC Browser pour Androïd

Firefox pour Androïd

Opéra mini

Exponential calculation functions.

1
exp()
function
2
sqrt()
function
3
pow()
function
4
log()
function
5
hypot()
function
Estimated overall support.
89%
89%
89%
89%
89%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

Rounding calculation functions.

1
mod()
function
2
rem()
function
Estimated overall support.
85%
85%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Firefox

Safari

Safari sur IOS

Chrome

Opéra

Edge

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

History of CSS computational functions.

  • CSS Values and Units Module Level 4

    Many mathematical or trigonometric calculation functions are introduced in this level 4 of the specification.
    WD
    August 14, 2018
    Working Draft.
    CR
    PR
    REC

See also: Other calculation functions.

The computational functions available in CSS are more and more numerous, covering the usual mathematical and trigonometric calculations. Here is the list to facilitate your research. You can also refer to the specification of the W3C: CSS Values and Units Module.

Functions:

acos()
Calculates the angle at which the cosine is equal to the specified value.
asin()
Calculates the angle at which the sine is equal to the specified value.
atan()
Calculates the angle whose tangent is equal to the specified value.
atan2()
Calculates the angle between the x-axis and the line connecting the origin point to the specified point.
attr()
Returns the value of an attribute (standard or custom) from HTML or XML code.
calc()
Langue française
Performs a calculation. Can be used in place of a value for a property.
clamp()
Langue française
Calculates a value between two extreme values.
cos()
Calculate the cosine of an angle.
exp()
Calculates the exponential of a number.
hypot()
Calculates the square root of a sum of squares of numbers.
log()
Calculates the logarithm of a number.
max()
Langue française
Determines the largest value among a series of values.
min()
Langue française
Determines the smallest value among a series of values.
mod()
Langue française
Calculates the remainder of the integer division between two numbers.
pow()
Calculates a power boost.
rem()
Langue française
Calculates the remainder of the integer division between two numbers.
round()
Langue française
Calculates the rounding of a number.
sign()
Determines the sign of a number.
sin()
Calculate the sine of an angle.
sqrt()
Calculates the square root of a number.
src()
Langue française
Specifies the address of a resource such as an image for example. Synonym of the url() function.
tan()
Calculates the tangent of an angle.
url()
Langue française
Specifies the address of a resource such as an image for example.

Values:

e
Langue française
The predefined value of the number e (the basis of natural logarithms), which is approximately 2.7182818284590452354.
infinity
Langue française
An error value indicating that the result of a calculation is an infinite value.
NaN
Langue française
An error value indicating that a calculation could not be performed because of a non-numeric parameter.
pi
Langue française
The preset value of the number pi (about 3.1415926535897932).