CSS - Math Functions

CSS math functions allow you to perform mathematical calculations directly in your CSS stylesheets. These functions can be used to manipulate values such as lengths, angles, colors, and more.

div{
    width: calc(100% - 40px); 
    /* 100% width minus 40px for padding */
    
    width: max(200px, 50%);
    /* Set width to the maximum value between 
    200px and 50% of the viewport width */
}

Table of Contents

• Types of Mathematical Functions in CSS
• Math Functions
• Basic Arithmetic Functions
• Comparison Functions
• Stepped Value Functions
• Trigonometric Functions

Types of Mathematical Functions in CSS

There are several types of math functions that can be used in CSS. They include:

• Basic Arithmetic FunctionsThis includes thecalc()function for performing calculations on numerical values.
• Comparison FunctionsThis includes functions likemin(),max(), andclamp()for comparing variables.
• Stepped Value FunctionsThis includes theround()function for calculating a rounded number based on a rounding strategy.
• Trigonometric FunctionsThese functions, such assin(),cos(), andtan(), introduce mathematical functions like sine, cosine, and tangent into stylesheets.

The calc Function

Thecalc()function is a basic arithmetic function in CSS that allows you to perform calculations on numerical values. It can be used to dynamically modify property values by carrying out mathematical operations like addition, subtraction, multiplication, and division.

Example

Here’s an example that demonstrates the usage of thecalc()function:

The max Function

Themax()function is a comparison function in CSS that allows you to determine the maximum value from a given list of values. It can be used to compare variables and apply conditional styling based on the maximum value.

Example

Here’s an example that demonstrates the usage of themax()function:

The min Function

Themin()function is a comparison function in CSS that allows you to determine the minimum value from a given list of values. It can be used to compare variables and apply conditional styling based on the minimum value.

Example

Here’s an example that demonstrates the usage of themin()function:

Comparison Functions

The assessment of values is made easier by CSS comparison functions, which allows conditional styling based on comparisons within stylesheets.

Following table lists comparison functions:

FunctionDescriptionExamplemin()Determines the minimum value from a given set of values.Try Itmax()Determines the maximum value from a given list of values.Try Itclamp()Calculates the central of a minimum, central, and maximum values.Try It

Stepped Value Functions

Stepped value functions provide granular control in stylesheets by enabling exact changes and discrete jumps in property values in CSS.

Following table lists stepped value functions:

FunctionDescriptionExampleround()Calculates a rounded number based on a rounding strategy.Try It

Trigonometric Functions

CSS trigonometric functions allow for more complex design alterations by introducing mathematical functions like sine, cosine, and tangent into stylesheets.

Following table lists trigonometric functions:

FunctionDescriptionExamplesin()Calculates the trigonometric sine of a number.Try Itcos()Calculates the trigonometric cosine of a numberTry Ittan()Calculates the trigonometric tangent of a number.Try Itasin()Calculates the trigonometric inverse sine of a number.Try Itacos()Calculates the trigonometric inverse cosine of a number.Try Itatan()Calculates the trigonometric inverse tangent of a number.Try Itatan2()Calculates the trigonometric inverse tangent of two-numbers in a plane.Try It