CSS HTML Validator - The fast, all-in-one, HTML, CSS, Link, SEO, spelling, and accessibility checker for Windows, & htmlval for Mac and Linux
Home Help: clamp() CSS function

The clamp() Function

Additional links:

Clamps a value between an upper and lower bound anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is required. It takes 3 parameters: a minimum value, a preferred value, and a maximum value.

Syntax for clamp()
CSSclamp( <calc-sum>#{3} ), where <calc-sum> = "<calc-product> [ [ '+' | '-' ] <calc-product> ]*", <calc-product> = "<calc-value> [ '*' <calc-value> | '/' <calc-number-value> ]*", and <calc-value> = "<number> | <dimension> | <percentage> | ( <calc-sum> )"


  • Note that the '+' and '-' operators must always be surrounded by whitespace, while the '*' and '/' operators do not require whitespace (but it is recommended for consistency).

Recommended Links

Search Engine Links (for more information)

Help us improve this page: Suggest a link or noteReport a problem