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_converterFull 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
- Color ConverterConvert any color between HEX, RGB, HSL, HSV, and CMYK in one place.
- HTML Table GeneratorPaste CSV or TSV and get a clean HTML, Tailwind-styled HTML, or Markdown table.
- CSS Border Radius GeneratorSculpt rounded corners with per-corner control, including elliptical and 'squircle' shapes.
- CSS Box Shadow GeneratorBuild CSS box-shadow values with a live preview — stack multiple shadows for depth.