{
  "slug": "css-px-to-rem",
  "name": "gizza-ai/css-px-to-rem",
  "version": "0.1.0",
  "title": "CSS px to rem Converter — rewrite a whole stylesheet — gizza.ai",
  "description": "Paste CSS and convert every px length to rem (or rem back to px) at any root font size. Filter properties, keep 1px borders, add fallbacks — all in your browser.",
  "tags": [
    "px to rem",
    "css px to rem converter",
    "rem to px",
    "convert css units",
    "root font size",
    "62.5 percent trick",
    "rem converter online"
  ],
  "category": "developer",
  "urls": {
    "page": "https://gizza.ai/tools/css-px-to-rem/",
    "markdown": "https://gizza.ai/tools/css-px-to-rem/index.md",
    "descriptor": "https://gizza.ai/tools/css-px-to-rem/tool.json",
    "deep_link_example": "https://gizza.ai/tools/css-px-to-rem/?css=.btn%20%7B%20font-size%3A%2024px%3B%20padding%3A%208px%2016px%3B%20border%3A%201px%20solid%20%23ccc%3B%20%7D&direction=px-to-rem&root_font_size=16&precision=5&properties=%2A%20%20%28or%3A%20font%2A%2C%20%2Amargin%2A%2C%20%2A%2C%21border%2A%29&min_pixel_value=0&media_queries=true&ignore_selectors=.no-rem%2C%20%23legacy&keep_fallback=true&unitless_zero=true"
  },
  "cli": "gizza tool css-px-to-rem \".btn { font-size: 24px; padding: 8px 16px; border: 1px solid #ccc; }\"",
  "tool": {
    "description": "Rewrite a whole CSS/SCSS/LESS stylesheet's px lengths to rem against a configurable root font size — or rem back to px with direction='rem-to-px'. root_font_size (default 16; use 10 for the 62.5% trick) sets what 1rem means; precision (0-10, default 5) caps decimals and trailing zeros are trimmed; properties filters which declarations convert with '*' wildcards and '!' exclusions (default '*' = all); min_pixel_value keeps small values such as 1px borders in px; media_queries (default false) opts breakpoint conditions in; ignore_selectors skips matching rules; keep_fallback emits px and rem declarations as a pair; unitless_zero (default true) writes 0 instead of 0rem. Comments, quoted strings, url(...) payloads and identifiers are preserved byte for byte, and a capitalized unit (16Px) opts a single value out. Runs locally.",
    "parameters": {
      "additionalProperties": false,
      "properties": {
        "css": {
          "description": "The CSS (or SCSS/LESS) source to rewrite, e.g. \".btn { font-size: 24px; padding: 8px 16px; }\". Comments, quoted strings and url(...) payloads are never touched.",
          "type": "string"
        },
        "direction": {
          "default": "px-to-rem",
          "description": "Which way to convert: 'px-to-rem' divides each px length by root_font_size, 'rem-to-px' multiplies each rem length by it. Default px-to-rem.",
          "enum": [
            "px-to-rem",
            "rem-to-px"
          ],
          "type": "string"
        },
        "ignore_selectors": {
          "description": "Comma-separated substrings; any rule whose selector (or enclosing selector) contains one is left entirely in its original units, e.g. \".no-rem, #legacy\". Empty by default.",
          "type": "string"
        },
        "keep_fallback": {
          "default": false,
          "description": "Keep the original declaration and append the converted one after it (font-size: 16px; font-size: 1rem;) as a fallback pair, instead of replacing it. Default false.",
          "type": "boolean"
        },
        "media_queries": {
          "default": false,
          "description": "Also convert lengths inside @media conditions (e.g. @media (min-width: 640px)). Default false, since breakpoints are usually kept in px.",
          "type": "boolean"
        },
        "min_pixel_value": {
          "default": 0.0,
          "description": "Leave lengths whose px magnitude is below this untouched — set 2 to keep 1px hairline borders in px. Applies to the px side in both directions. Default 0 (convert everything).",
          "minimum": 0,
          "type": "number"
        },
        "precision": {
          "default": 5,
          "description": "Decimal places kept on each converted number, 0-10. Trailing zeros are always trimmed (0.5000 → 0.5). Default 5.",
          "maximum": 10,
          "minimum": 0,
          "type": "integer"
        },
        "properties": {
          "default": "*",
          "description": "Comma-separated list of CSS properties to convert, with wildcards: '*' = all (default), 'font*' = prefix, '*width' = suffix, '*margin*' = contains, and a leading '!' excludes (e.g. '*,!border*' converts everything except border properties).",
          "type": "string"
        },
        "root_font_size": {
          "default": 16.0,
          "description": "The root (html) font size in px that 1rem stands for, 1-100. Browsers default to 16; use 10 for the 62.5% (html { font-size: 62.5% }) trick. Default 16.",
          "maximum": 100,
          "minimum": 1,
          "type": "number"
        },
        "unitless_zero": {
          "default": true,
          "description": "Write a zero-valued length as a bare 0 rather than 0rem/0px. Default true.",
          "type": "boolean"
        }
      },
      "required": [
        "css"
      ],
      "type": "object"
    }
  }
}