Mathematical functions.
Mathematical calculation functions in CSS.
Main calculation functions.
Determination or change of sign:
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:
sin()
,cos()
, etc.. See also the trigonometric 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 thea
value. In our example, the valuea
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 exponenta
. In other words, this function is equivalent topow(e,a)
.
e
anda
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)
issqrt(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 asabs()
.If two values are provided,
hypot()
calculates the length of the hypotenuse of a right triangle whose sides measure dimensionsa
andb
, respectively. If more values are provided, the calculation is the same, but on figures with 3, 4 or more dimensions.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.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. Thehypot()
function simplifies this calculation.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 number8
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 baseb
. Ifb
is omitted, the function calculates the logarithm ofa
at basee
.
The two numbersa
andb
must be specified without a unit. The result is also unity-free. - <propriété>: pow(200, 2); a b
Calculates
a
raised to the powerof b
.
For example, exp(2,3)
returns8
.
a
andb
are numbers without unit. The result of the function is also a number unitless. - <propriété>: sign(200px); a
Returns
-1
if the valuea
is negative,1
ifa
is positive, or returns0
ifa
is0
.
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.
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.
calc()
to evaluate an expression.var()
function that allows retrieving their value.Notes:
(1) The function calc()
is bugged in Internet Explorer.
calc()
function
var()
function
abs()
function
sign()
function
min()
max()
and
clamp()
functions
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.
exp()
function
sqrt()
function
pow()
function
log()
function
hypot()
function
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.
mod()
function
rem()
function
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.August 14, 2018Working Draft.
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:









Values:

e
(the basis of natural logarithms), which is approximately 2.7182818284590452354.


pi
(about 3.1415926535897932).