Skip to content
BEAD

CSS Unit Converter

Convert px ↔ rem ↔ em ↔ pt ↔ % with an adjustable base font size.

Pixels (px)
Root em (rem)
Em (em)
Points (pt)
Percent (%)
Common preset jumps
</>Use this tool programmaticallycurl · JavaScript · MCP

Same tool, callable from any HTTP client or from Claude (via MCP). Anonymous: 100 req/day per IP. Sign up for 1,000 req/day.

curl
curl https://api.b-e-a-d.com/tools/css-unit-converter/run \
  -H "Content-Type: application/json" \
  -d '{
  "value": 1,
  "from": "px",
  "base": 16,
  "parent": 16,
  "container": 1280
}'
JavaScript (fetch)
const res = await fetch("https://api.b-e-a-d.com/tools/css-unit-converter/run", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
  "value": 1,
  "from": "px",
  "base": 16,
  "parent": 16,
  "container": 1280
}),
});
const data = await res.json();
console.log(data.result);
MCP (Claude Desktop / Claude Code)
# In Claude Desktop / Claude Code, add to your MCP config:
{
  "mcpServers": {
    "bead": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.b-e-a-d.com"]
    }
  }
}

# Then ask Claude to call:
mcp__bead__bead_css_unit_converter

Full reference: developer docs · OpenAPI spec

Quick reference

  • rem — relative to the root <html> font size (default 16 px).
  • em — relative to the parent element's font size. Tricky when nested.
  • pt — print typography unit. 1 pt = 1/72 inch ≈ 1.333 px.
  • % shown here is relative to the container width supplied below.

You might also like