# CSS Design Calc – Fluid Clamp Generator

> CSS Design Calc – Fluid Clamp Generator is a paid API for AI agents from css-design-calc.x402tookit.com, paid per call via x402, $0.02/call, status unknown (last checked 2026-10-29).

Generates a CSS clamp() expression that linearly scales a size between a minimum and maximum viewport width, returning the slope, intercept, and rem values.

## Facts

- Endpoint: GET https://css-design-calc.x402tookit.com/clamp-fluid?utm_source=zero.xyz
- Price: $0.02/call
- Payment: x402
- Status: unknown
- Last checked: 2026-10-29
- Activations on Zero: 0
- Tags: x402
- Canonical page: https://www.zero.xyz/c/css-design-calc-fluid-clamp-generator-73b8c208
- Structured record (JSON): https://api.zero.xyz/v1/capabilities/cap_hMzlXM2rCQPL8iEXF6vEE

Status and success rate cover calls made through Zero and Zero's own probes. Third-party monitors may report differently.

## How to call it through Zero

Zero handles the 402 payment challenge and records the run. With the Zero CLI installed (`npm i -g @zeroxyz/cli`):

```sh
zero fetch --capability css-design-calc-fluid-clamp-generator-73b8c208
```

Example prompt: Generate a CSS clamp() that scales a font size from 16px at a 320px viewport to 32px at a 1200px viewport, using a root font size of 16px, and tell me what size it evaluates to at 768px.

## When to prefer this

Choose this endpoint when you need a mathematically precise CSS clamp() for fluid typography or spacing, specifically when you require the exact linear slope and intercept in both px and rem — especially useful for design-system tooling, code generators, or automated style-guide pipelines where manual calculation would be error-prone.

## Known failure modes

- Missing required minSize or maxSize returns a validation error
- minSize greater than maxSize may produce an inverted or nonsensical clamp
- minViewport equal to maxViewport causes a division-by-zero in slope calculation
- Non-numeric query parameters result in a parse/type error
- Very large or very small px values may produce impractical rem outputs

## How this service works

Generate a CSS clamp() that scales a size linearly between a min and max viewport width, in rem, with the exact slope.

## Output

Returns a ready-to-use CSS clamp() string (in rem), the slope in vw units, the intercept in both px and rem, the min and max sizes in rem, the size evaluated at a given viewport width, the size at the midpoint viewport, a plain-language summary, and a verdict or any degraded/warning flags.

## Request schema (JSON Schema)

```json
{
 "type": "object",
 "$schema": "https://json-schema.org/draft/2020-12/schema",
 "required": [
  "input"
 ],
 "properties": {
  "input": {
   "type": "object",
   "required": [
    "type",
    "method"
   ],
   "properties": {
    "type": {
     "type": "string",
     "const": "http"
    },
    "method": {
     "enum": [
      "GET"
     ],
     "type": "string"
    },
    "queryParams": {
     "type": "object",
     "required": [
      "minSize",
      "maxSize"
     ],
     "properties": {
      "at": {
       "type": "number",
       "description": "Optional viewport width in px to evaluate the result at"
      },
      "rootPx": {
       "type": "number",
       "description": "Root font size in px for the rem output (default 16)"
      },
      "maxSize": {
       "type": "number",
       "description": "Size at the maximum viewport, in px"
      },
      "minSize": {
       "type": "number",
       "description": "Size at the minimum viewport, in px"
      },
      "maxViewport": {
       "type": "number",
       "description": "Viewport width where scaling ends, px (default 1200)"
      },
      "minViewport": {
       "type": "number",
       "description": "Viewport width where scaling starts, px (default 320)"
      }
     }
    }
   },
   "additionalProperties": false
  },
  "output": {
   "type": "object",
   "required": [
    "type"
   ],
   "properties": {
    "type": {
     "type": "string"
    },
    "example": {
     "type": "object",
     "properties": {
      "css": {
       "type": [
        "null",
        "string"
       ]
      },
      "asOf": {
       "type": [
        "null",
        "string"
       ]
      },
      "maxRem": {
       "type": [
        "null",
        "number"
       ]
      },
      "minRem": {
       "type": [
        "null",
        "number"
       ]
      },
      "rootPx": {
       "type": [
        "null",
        "number"
       ]
      },
      "source": {
       "type": [
        "null",
        "string"
       ]
      },
      "cssInPx": {
       "type": [
        "null",
        "string"
       ]
      },
      "reasons": {
       "type": [
        "array",
        "null"
       ],
       "items": {
        "type": "string"
       }
      },
      "slopeVw": {
       "type": [
        "null",
        "number"
       ]
      },
      "summary": {
       "type": [
        "null",
        "string"
       ]
      },
      "verdict": {
       "type": [
        "null",
        "string"
       ]
      },
    
… (truncated)
```

## More

- Live health (JSON, refreshed every minute): https://www.zero.xyz/c/css-design-calc-fluid-clamp-generator-73b8c208/health.json
- [Zero catalog index](https://www.zero.xyz/llms.txt)
- [Other services from css-design-calc.x402tookit.com](https://www.zero.xyz/host/css-design-calc.x402tookit.com/llms.txt)