Custom Properties, Calc, Min, Max and Clamp

What Is It?

Custom properties store reusable CSS values. Math functions combine or limit values so designs can scale without many breakpoints.

Properties, Tags and Attributes Explained

• --accent / var(): Define and read a custom property. Custom properties participate in the cascade and normally inherit.
• calc(): Combines compatible values with arithmetic; put spaces around + and -.
• min() / max(): Choose the smaller or larger of compatible values.
• clamp(min, preferred, max): Keeps a preferred value between limits.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Reusable theme

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Properties, Calc, Min, Max and Clamp</title>
  <style>
    :root { --accent: #7c3aed; --space: 16px; }
    .card { border: 2px solid var(--accent); padding: var(--space); }
    h2 { color: var(--accent); }
  </style>
</head>
<body>
  <div class="card"><h2>One theme color</h2><p>Change the variable once.</p></div>
</body>
</html>

What you see: The heading and border share a single accent value.

Example 2: Fluid heading

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Properties, Calc, Min, Max and Clamp</title>
  <style>
    h2 { font-size: clamp(1.5rem, 5vw, 3rem); }
    .panel { width: min(100%, 36rem); padding: calc(1rem + 1vw); box-sizing: border-box; background: #eff6ff; }
  </style>
</head>
<body>
  <div class="panel"><h2>Scales with space</h2><p>Resize the preview.</p></div>
</body>
</html>

What you see: The heading grows with viewport width but stays within its minimum and maximum sizes.

When and Where to Use It

Use variables for design tokens such as colors and spacing; use clamp for fluid typography and min for constrained panels.

Common Mistake or Useful Tip

A custom property stores a value, not a whole reusable declaration block. Include a fallback such as var(--accent, blue) when appropriate.

Try It Yourself

Override --accent on .card and observe its heading inherit the new value.