Skip to main content

CSS Math Functions

CSS Math functions are a set of built-in functions that allow you to perform mathematical operations in CSS.

Here are some of the most commonly used math functions:

The calc() Functions​

This function allows you to perform simple math operations like addition, subtraction, multiplication, and division within a CSS property.

As an example:

Editor

Loading...

In this example:

  • We use the calc() function to set the width and height of a div element to be 20 pixels less than the full width and 100 pixels less than the full height of the viewport, respectively.
  • We also use calc() to set the font size of an h1 element to be 1.5 times the base font size plus 10 pixels, and the font size of a p element to be 14 pixels plus 0.5% of the viewport width.

The min() Functions​

This function returns the smallest value among two or more input values. You can use min() to set a property to the smallest of several values.

As an example:

Editor

Loading...

In this example:

  • We use the min() function to set the width of a div element to be either 50% of the container width or 300 pixels, whichever is smaller.
  • We also use min() to set the height of the div element to be either 400 pixels or 80% of the viewport height, whichever is smaller.
  • We also use min() to set the font size of an h1 element to be either 2.5 times the base font size or 5% of the viewport width, whichever is smaller.
  • We use min() to set the font size of a p element to be either 16 pixels or 1.5 times the parent element's font size, whichever is smaller.
tip

The min() function allows you to set a property to the smallest of several values, which can be useful for making your layouts responsive to different screen sizes and devices.

The max() Functions​

This function returns the largest value among two or more input values. You can use max() to set a property to the largest of several values.

As an example:

Editor

Loading...

In this example:

  • We use the max() function to set the width of a div element to be either 30% of the container width or 200 pixels, whichever is larger.
  • We also use max() to set the height of the div element to be either 300 pixels or 60% of the viewport height, whichever is larger.
  • We also use max() to set the font size of an h1 element to be either 2 times the base font size or 3% of the viewport width, whichever is larger.
  • We use max() to set the font size of a p element to be either 14 pixels or 80% of the parent element's font size, whichever is larger.
tip

The max() function allows you to set a property to the largest of several values, which can be useful for making your layouts responsive to different screen sizes and devices.

The clamp() Functions​

This function allows you to set a value that is within a range of minimum and maximum values. You can use clamp() to set a property to a value that is within a specified range.

As an example:

Editor

Loading...

In this example:

  • We use the clamp() function to set the width of a div element to be a value that is between 200 pixels and 50% of the container width, but not less than 200 pixels or greater than 500 pixels.
  • We also use clamp() to set the height of the div element to be a value that is between 200 pixels and 60% of the viewport height, but not less than 200 pixels or greater than 400 pixels.
  • We also use clamp() to set the font size of an h1 element to be a value that is between 2 times the base font size and 5% of the viewport width, but not less than 2rem or greater than 4rem.
  • We use clamp() to set the font size of a p element to be a value that is between 14 pixels and 120% of the parent element's font size, but not less than 14px or greater than 18px.
tip

The clamp() function allows you to set a property to a value that is between a minimum and maximum value, which can be useful for creating flexible and responsive layouts.