CSS Unit Converter

Convert CSS units instantly — px, em, rem, pt, vh, vw, cm, mm, in, and pc — with full context-awareness for font size and viewport dimensions. Get a complete conversion table for every value in a single API call.

What does CSS Unit Converter do?

CSS Unit Converter is a pure-math utility actor that converts any CSS measurement value into all other CSS units simultaneously. Provide a list of values with their source units, set your viewport dimensions and base font size, and receive a complete conversion table with every result in px, em, rem, pt, vh, vw, cm, mm, in, and pc.

Unlike browser-based tools that require a real DOM context, this actor uses precise CSS specification math — the same formulas browsers use — so results are reliable, deterministic, and reproducible across any environment.

Supported units: px, em, rem, pt, vh, vw, cm, mm, in, pc

Who is CSS Unit Converter for?

🧑‍💻 Front-end developers working across design systems

You're migrating a legacy codebase from pixel-based to rem-based typography. You need to convert dozens of hardcoded px values to rem equivalents without manually dividing each by 16. Feed the entire list to this actor and get all conversions in one structured response.

• Batch-convert entire token lists (spacing, font sizes, line heights)
• Compare em vs rem to understand parent-relative cascading effects
• Generate conversion tables for design handoff documentation

🎨 UI/UX designers bridging design tools and code

Your Figma mockup uses pixels but your dev team works in rem. You need to translate design specs into CSS values that match the codebase's base font size — quickly and accurately.

• Convert Figma px measurements to rem/em for CSS
• Verify pt measurements from print designs match CSS pixel equivalents
• Generate reference tables for design-to-code annotation

🖨️ Print CSS specialists

You're styling @media print stylesheets and need to reconcile px/em values with physical units (cm, mm, in, pt) for exact paper layout.

• Convert screen px values to physical print units
• Verify 1in = 96px = 72pt = 2.54cm at CSS standard DPI
• Generate accurate page margin and column width values

⚙️ Build tools and CSS preprocessor pipelines

You're building a Sass/Less mixin generator or a design token transformer that needs CSS unit math as a service. This actor provides a reliable, language-agnostic calculation endpoint.

• Integrate via API into any programming language
• Use as a calculation step in CI/CD pipelines
• Automate conversion tables for generated CSS

Why use CSS Unit Converter?

• 🎯 100% accurate — implements the CSS specification conversion formulas exactly
• ⚡ Zero latency — pure math, no HTTP scraping, no browser overhead
• 📦 Batch processing — convert dozens of values in a single API call
• 🔧 Context-aware — respects your actual base font size (rem) and viewport (vw/vh)
• 🎛️ Filterable output — request only the target units you need
• 💰 Near-zero cost — no proxy, no browser, pure computation
• 🔗 API-first — JSON in, JSON out — integrate anywhere

What data can you extract?

Each conversion set returns:

Field	Type	Description
label	string	Optional label from your input
inputValue	number	The original value you provided
fromUnit	string	The source CSS unit
px	number	Value in pixels
em	number	Value in em (relative to context font size)
rem	number	Value in rem (relative to root font size)
pt	number	Value in points (1pt = 1/72 in)
vh	number	Value in viewport height units
vw	number	Value in viewport width units
cm	number	Value in centimeters
mm	number	Value in millimeters
in	number	Value in inches
pc	number	Value in picas (1pc = 12pt)
conversions	object	All converted values as a flat key-value map
context	object	The context used: baseFontSizePx, contextFontSizePx, viewportWidthPx, viewportHeightPx
error	string|null	Error message if conversion failed (bad unit, invalid value)

How much does it cost to convert CSS units?

CSS Unit Converter uses Pay-Per-Event (PPE) pricing — you pay only for what you use.

Event	FREE tier	BRONZE	SILVER	GOLD	PLATINUM	DIAMOND
Run started (one-time)	$0.005	$0.00475	$0.00425	$0.00375	$0.003	$0.0025
Per conversion set	$0.001	$0.0009	$0.0008	$0.00065	$0.0005	$0.0004

Real-world cost examples:

• Convert 10 CSS values: $0.005 (start) + $0.01 (10 × $0.001) = $0.015
• Convert 100 CSS values: $0.005 + $0.10 = $0.105
• Convert 500 CSS values: $0.005 + $0.50 = $0.505

Free plan estimate: Apify's free $5/month in credits covers approximately 4,900 conversion sets per month — more than enough for typical design-system work.

How to convert CSS units

1. Go to the CSS Unit Converter page on Apify Store
2. Click Try for free
3. Add your CSS values in the Values to Convert field (JSON array format)
4. Set Base font size (default 16px — the browser default)
5. Set Viewport width and Viewport height (for vw/vh conversions)
6. Optionally fill in Target units to filter output (leave empty for all units)
7. Click Start and download results as JSON, CSV, or Excel

Input examples:

Convert a single font size:

{
    "conversions": [
        { "value": 16, "fromUnit": "px", "label": "Body font" }
    ],
    "baseFontSizePx": 16,
    "viewportWidthPx": 1440,
    "viewportHeightPx": 900
}

Convert a complete type scale:

{
    "conversions": [
        { "value": 12, "fromUnit": "px", "label": "xs" },
        { "value": 14, "fromUnit": "px", "label": "sm" },
        { "value": 16, "fromUnit": "px", "label": "base" },
        { "value": 18, "fromUnit": "px", "label": "lg" },
        { "value": 24, "fromUnit": "px", "label": "xl" },
        { "value": 30, "fromUnit": "px", "label": "2xl" },
        { "value": 36, "fromUnit": "px", "label": "3xl" },
        { "value": 48, "fromUnit": "px", "label": "4xl" }
    ],
    "baseFontSizePx": 16,
    "viewportWidthPx": 1440,
    "viewportHeightPx": 900,
    "targetUnits": ["px", "rem", "pt"]
}

Input parameters

Parameter	Type	Default	Description
conversions	array	required	List of CSS values to convert. Each item: { value, fromUnit, label? }
conversions[].value	number	required	Numeric CSS value to convert
conversions[].fromUnit	string	required	Source CSS unit: px, em, rem, pt, vh, vw, cm, mm, in, pc
conversions[].label	string	optional	Human-readable label to identify this value in the output
baseFontSizePx	integer	16	Root font size (px) for rem conversions. Browser default is 16px.
contextFontSizePx	integer	= baseFontSizePx	Parent element font size (px) for em conversions
viewportWidthPx	integer	1440	Viewport width (px) for vw conversions
viewportHeightPx	integer	900	Viewport height (px) for vh conversions
targetUnits	array	[] (all)	Filter output to specific units. Empty = return all 10 units
precision	integer	4	Decimal places for converted values (0-10)

Output examples

Input: 16px with default context (16px base, 1440×900 viewport)

{
    "label": "Body font size",
    "inputValue": 16,
    "fromUnit": "px",
    "context": {
        "baseFontSizePx": 16,
        "contextFontSizePx": 16,
        "viewportWidthPx": 1440,
        "viewportHeightPx": 900
    },
    "px": 16,
    "em": 1,
    "rem": 1,
    "pt": 12,
    "vh": 1.7778,
    "vw": 1.1111,
    "cm": 0.4233,
    "mm": 4.2333,
    "in": 0.1667,
    "pc": 1,
    "conversions": {
        "px": 16,
        "em": 1,
        "rem": 1,
        "pt": 12,
        "vh": 1.7778,
        "vw": 1.1111,
        "cm": 0.4233,
        "mm": 4.2333,
        "in": 0.1667,
        "pc": 1
    },
    "error": null
}

Input: 72pt (print heading)

{
    "label": "Print heading",
    "inputValue": 72,
    "fromUnit": "pt",
    "px": 96,
    "em": 6,
    "rem": 6,
    "pt": 72,
    "vh": 10.6667,
    "vw": 6.6667,
    "cm": 2.54,
    "mm": 25.4,
    "in": 1,
    "pc": 6,
    "error": null
}

Tips for best results

• 💡 Start small — use the prefilled example (6 values) to verify the actor works as expected before submitting large batches
• 🔧 Always set baseFontSizePx — if your project uses 14px or 18px as the root font size, set it explicitly to get accurate rem values
• 📐 Set contextFontSizePx for em conversions — em is relative to the parent element, not the root. If you're converting inside a component with 14px font, set contextFontSizePx: 14
• 🖥️ Set real viewport dimensions — use your actual breakpoint widths for accurate vw/vh values. For mobile-first: 390×844 (iPhone 14), for desktop: 1440×900
• 🎯 Use targetUnits to reduce noise — if you only need px→rem conversions, specify targetUnits: ["rem"] to get clean, focused output
• 🏷️ Always use labels — add a label to each conversion item so the output is self-documenting and easy to reference in your codebase
• 🔢 Adjust precision — use precision: 6 for scientific accuracy in print layouts, precision: 2 for practical CSS values

Integrations

CSS Unit Converter → Google Sheets for design token libraries: Export the JSON output and use Apify's Google Sheets integration to populate a live token table. Design teams can view the full px/rem/pt table and copy values directly into Figma or code annotations.

CSS Unit Converter → Make.com or Zapier for design system pipelines: Trigger a conversion run whenever your design tokens file is updated. Automatically push the results to a Notion database or Confluence page for developer reference.

CSS Unit Converter → Node.js/Python build scripts: Call the API directly in your design token transformer (Style Dictionary, Theo, etc.) to convert pixel values in your token JSON files to multi-unit outputs during the build step.

Scheduled runs for viewport documentation: Schedule monthly runs with different viewport presets (mobile, tablet, desktop) to keep your responsive breakpoint conversion tables up to date in documentation.

CSS Unit Converter → Slack alerts for design reviews: When a designer submits new pixel values for review, trigger a conversion run and post the rem/pt equivalents to a Slack channel for the dev team to review before implementation.

Using the Apify API

Node.js

import { ApifyClient } from 'apify-client';

const client = new ApifyClient({ token: 'YOUR_APIFY_TOKEN' });

const run = await client.actor('automation-lab/css-unit-converter').call({
    conversions: [
        { value: 16, fromUnit: 'px', label: 'Body font' },
        { value: 1.5, fromUnit: 'rem', label: 'Heading' },
    ],
    baseFontSizePx: 16,
    viewportWidthPx: 1440,
    viewportHeightPx: 900,
});

const { items } = await client.dataset(run.defaultDatasetId).listItems();
console.log(items);

Python

from apify_client import ApifyClient

client = ApifyClient('YOUR_APIFY_TOKEN')

run = client.actor('automation-lab/css-unit-converter').call(run_input={
    'conversions': [
        {'value': 16,  'fromUnit': 'px',  'label': 'Body font'},
        {'value': 1.5, 'fromUnit': 'rem', 'label': 'Heading'},
    ],
    'baseFontSizePx': 16,
    'viewportWidthPx': 1440,
    'viewportHeightPx': 900,
})

items = client.dataset(run['defaultDatasetId']).list_items().items
for item in items:
    print(item)

cURL

curl -X POST "https://api.apify.com/v2/acts/automation-lab~css-unit-converter/runs" \
  -H "Authorization: Bearer YOUR_APIFY_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "conversions": [
      {"value": 16, "fromUnit": "px", "label": "Body font"},
      {"value": 1.5, "fromUnit": "rem", "label": "Heading"}
    ],
    "baseFontSizePx": 16,
    "viewportWidthPx": 1440,
    "viewportHeightPx": 900
  }'

Use with AI agents via MCP

CSS Unit Converter is available as a tool for AI assistants that support the Model Context Protocol (MCP).

Add the Apify MCP server to your AI client — this gives you access to all Apify actors, including this one:

Setup for Claude Code

$claude mcp add --transport http apify "https://mcp.apify.com?tools=automation-lab/css-unit-converter"

Setup for Claude Desktop, Cursor, or VS Code

Add this to your MCP config file:

{
    "mcpServers": {
        "apify": {
            "type": "http",
            "url": "https://mcp.apify.com?tools=automation-lab/css-unit-converter",
            "headers": {
                "Authorization": "Bearer YOUR_APIFY_TOKEN"
            }
        }
    }
}

Example prompts for AI agents:

• "Convert my entire spacing scale (4, 8, 12, 16, 24, 32, 48, 64px) to rem and em values using 16px base font size."
• "I'm building a print stylesheet. Convert these em values to pt and cm: 1em, 1.5em, 2em, 3em."
• "Generate a full conversion table for 1rem with base font 16px and a 1920x1080 viewport."

Is it legal to use CSS Unit Converter?

CSS Unit Converter performs pure mathematical calculations — it does not scrape any website, access any external service, or process any user data. The conversion formulas implement the published CSS specification from W3C, which is open and freely available.

There are no legal restrictions on using mathematical CSS unit conversions. This actor is equivalent to running the calculations in your own code — it simply provides a convenient, hosted API endpoint.

FAQ

What CSS units are supported? All 10 common CSS length units: px (pixels), em (parent font-relative), rem (root font-relative), pt (points), vh (viewport height), vw (viewport width), cm (centimeters), mm (millimeters), in (inches), pc (picas). Percentage (%), ch, ex, vmin, vmax are not supported in this version.

What's the difference between em and rem? rem is relative to the root (html) font size — typically 16px. em is relative to the current element's font size, which can vary throughout the DOM. Set baseFontSizePx for rem and contextFontSizePx for em conversions.

How accurate are the conversions? Conversions use exact CSS specification math: 1in = 96px, 1in = 72pt, 1in = 6pc, 1in = 2.54cm, 1in = 25.4mm. These are the fixed ratios defined in the CSS spec — the same values browsers use for absolute length units.

Do vh/vw conversions require a real browser? No. vh and vw are simply percentages of the viewport dimensions you provide. Set viewportWidthPx and viewportHeightPx to your target viewport size and the math is deterministic.

Why do my em values look wrong? The em unit is relative to the parent element's font size, not the root. If you're converting inside a component where the font size is 14px (not 16px), set contextFontSizePx: 14. The default contextFontSizePx equals baseFontSizePx.

Why are some fields null in the output? When you use targetUnits to filter output, only the specified units appear in the flat fields — other unit fields are null. The conversions object only contains the units you requested. Remove targetUnits (or set it to []) to get all 10 units.

The actor returned an error for one of my items — what happened? Check the error field on the failed item. Common causes: unrecognized source unit (must be one of the 10 supported units, lowercase), or a non-finite number value. Valid items in the same run still succeed — the actor does not abort on individual errors.

How fast is it? Extremely fast. Each conversion is ~0.1ms of CPU. A batch of 1,000 values typically completes in under 2 seconds total (including Actor startup overhead).

Other CSS and design tools

Looking for more developer utilities? Check out these other tools from automation-lab:

• 🎨 Color Contrast Checker (WCAG) — Validate color pairs against WCAG 2.1 AA/AAA accessibility standards
• 🔗 JSON Schema Generator — Generate JSON Schema from sample JSON objects automatically
• 🌐 DNS Checker — Bulk DNS lookup with A, AAAA, MX, CNAME, TXT records
• 🔒 SSL Certificate Checker — Check SSL certificate validity, expiry, and chain across domains
• 📧 Email Validator — Validate email addresses with MX record verification and syntax checks