{"id":26,"date":"2026-09-30T16:59:37","date_gmt":"2026-09-30T16:59:37","guid":{"rendered":"https:\/\/benjaminolsen.dev\/?page_id=26"},"modified":"2026-09-30T19:12:32","modified_gmt":"2026-09-30T19:12:32","slug":"css-clamp-generator","status":"publish","type":"page","link":"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/","title":{"rendered":"CSS Clamp Generator"},"content":{"rendered":"<div class=\"oxy-container-26-130 oxy-container bo-page\"><header class=\"oxy-container-26-105 oxy-container bo-header\"><a class=\"oxy-text-link-26-100 oxy-text-link bo-brand\" href=\"\/\" target=\"_self\">\nBenjamin Olsen\n<\/a><nav class=\"oxy-container-26-104 oxy-container bo-nav\" aria-label=\"Main navigation\"><a class=\"oxy-text-link-26-101 oxy-text-link bo-nav-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/tools\/\" target=\"_self\">\nTools\n<\/a><a class=\"oxy-text-link-26-102 oxy-text-link bo-nav-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/guides\/\" target=\"_self\">\nLearn\n<\/a><a class=\"oxy-text-link-26-103 oxy-text-link bo-nav-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/about\/\" target=\"_self\">\nAbout\n<\/a><\/nav><\/header><main class=\"oxy-container-26-126 oxy-container bo-main\"><section class=\"oxy-container-26-109 oxy-container bo-page-head\"><a class=\"oxy-text-link-26-106 oxy-text-link bo-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/tools\/\" target=\"_self\">\nAll tools\n<\/a><h1 class=\"oxy-text-26-107 oxy-text bo-page-title\">\nCSS Clamp Generator\n<\/h1><p class=\"oxy-text-26-108 oxy-text bo-intro\">\nSet the minimum and maximum size. Get fluid CSS that scales between your chosen viewport widths.\n<\/p><\/section><section class=\"oxy-container-26-125 oxy-container bo-workspace\" data-tool=\"clamp\" aria-label=\"CSS Clamp Generator\"><div class=\"oxy-container-26-118 oxy-container bo-form\"><div class=\"oxy-container-26-116 oxy-container bo-fields\"><label class=\"oxy-text-26-110 oxy-text bo-field\" for=\"bo-min\">\nMinimum size (px)<input class=\"bo-input\" id=\"bo-min\" data-key=\"min\" type=\"number\" value=\"32\" min=\"0\" step=\"any\">\n<\/label><label class=\"oxy-text-26-111 oxy-text bo-field\" for=\"bo-max\">\nMaximum size (px)<input class=\"bo-input\" id=\"bo-max\" data-key=\"max\" type=\"number\" value=\"64\" min=\"0\" step=\"any\">\n<\/label><label class=\"oxy-text-26-112 oxy-text bo-field\" for=\"bo-wmin\">\nMinimum viewport (px)<input class=\"bo-input\" id=\"bo-wmin\" data-key=\"wmin\" type=\"number\" value=\"320\" min=\"1\" step=\"any\">\n<\/label><label class=\"oxy-text-26-113 oxy-text bo-field\" for=\"bo-wmax\">\nMaximum viewport (px)<input class=\"bo-input\" id=\"bo-wmax\" data-key=\"wmax\" type=\"number\" value=\"1440\" min=\"1\" step=\"any\">\n<\/label><label class=\"oxy-text-26-114 oxy-text bo-field\" for=\"bo-base\">\nRoot font size (px)<input class=\"bo-input\" id=\"bo-base\" data-key=\"base\" type=\"number\" value=\"16\" min=\"1\" step=\"any\">\n<\/label><label class=\"oxy-text-26-115 oxy-text bo-field\" for=\"bo-viewport\">\nPreview viewport (px)<input class=\"bo-input\" id=\"bo-viewport\" data-key=\"viewport\" type=\"range\" value=\"800\" min=\"320\" max=\"1440\" step=\"1\">\n<\/label><\/div><p class=\"oxy-text-26-117 oxy-text bo-note\">\nUse the result for font-size, gap or padding. REM values assume the root size you enter. Check text resizing and browser zoom before publishing.\n<\/p><\/div><div class=\"oxy-container-26-124 oxy-container bo-result\"><p class=\"oxy-text-26-119 oxy-text bo-eyebrow\">\nYour result\n<\/p><pre class=\"oxy-text-26-120 oxy-text bo-code\" data-result=\"code\" aria-live=\"polite\">\n\n<\/pre><button class=\"oxy-text-link-26-121 oxy-text-link bo-button\" target=\"_self\" type=\"button\" data-action=\"copy\">\nCopy result\n<\/button><p class=\"oxy-text-26-122 oxy-text bo-status\" data-result=\"status\" role=\"status\">\n\n<\/p><div class=\"oxy-text-26-123 oxy-text bo-preview\" data-result=\"preview\">\nType that adapts.\n<\/div><\/div><\/section><\/main><footer class=\"oxy-container-26-129 oxy-container bo-footer\"><p class=\"oxy-text-26-127 oxy-text\">\nBenjamin Olsen \u00b7 Useful tools. Practical guides.\n<\/p><a class=\"oxy-text-link-26-128 oxy-text-link bo-nav-link\" href=\"https:\/\/benjaminolsen.dev\/index.php\/guides\/\" target=\"_self\">\nExplore topics\n<\/a><\/footer><\/div>","protected":false},"excerpt":{"rendered":"<p>Benjamin Olsen Tools Learn About All tools CSS Clamp Generator Set the minimum and maximum size. Get fluid CSS that scales between your chosen viewport widths. Minimum size (px) Maximum size (px) Minimum viewport (px) Maximum viewport (px) Root font size (px) Preview viewport (px) Use the result for font-size, gap or padding. REM values [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_oxygen_hide_in_design_set":false,"_oxygen_tags":"","footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Clamp Generator for Fluid Typography | Benjamin Olsen<\/title>\n<meta name=\"description\" content=\"Generate CSS clamp values from minimum and maximum sizes and viewport widths. Preview fluid typography, validate inputs and copy the CSS result.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Clamp Generator for Fluid Typography | Benjamin Olsen\" \/>\n<meta property=\"og:description\" content=\"Generate CSS clamp values from minimum and maximum sizes and viewport widths. Preview fluid typography, validate inputs and copy the CSS result.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Benjamin Olsen\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-30T19:12:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/css-clamp-generator\\\/\",\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/css-clamp-generator\\\/\",\"name\":\"CSS Clamp Generator for Fluid Typography | Benjamin Olsen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#website\"},\"datePublished\":\"2026-09-30T16:59:37+00:00\",\"dateModified\":\"2026-09-30T19:12:32+00:00\",\"description\":\"Generate CSS clamp values from minimum and maximum sizes and viewport widths. Preview fluid typography, validate inputs and copy the CSS result.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/css-clamp-generator\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/css-clamp-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/css-clamp-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/benjaminolsen.dev\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Clamp Generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#website\",\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/\",\"name\":\"Benjamin Olsen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/benjaminolsen.dev\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\",\"name\":\"Benjamin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"caption\":\"Benjamin\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\\/\\\/benjaminolsen.dev\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Clamp Generator for Fluid Typography | Benjamin Olsen","description":"Generate CSS clamp values from minimum and maximum sizes and viewport widths. Preview fluid typography, validate inputs and copy the CSS result.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/","og_locale":"da_DK","og_type":"article","og_title":"CSS Clamp Generator for Fluid Typography | Benjamin Olsen","og_description":"Generate CSS clamp values from minimum and maximum sizes and viewport widths. Preview fluid typography, validate inputs and copy the CSS result.","og_url":"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/","og_site_name":"Benjamin Olsen","article_modified_time":"2026-09-30T19:12:32+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/","url":"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/","name":"CSS Clamp Generator for Fluid Typography | Benjamin Olsen","isPartOf":{"@id":"https:\/\/benjaminolsen.dev\/#website"},"datePublished":"2026-09-30T16:59:37+00:00","dateModified":"2026-09-30T19:12:32+00:00","description":"Generate CSS clamp values from minimum and maximum sizes and viewport widths. Preview fluid typography, validate inputs and copy the CSS result.","breadcrumb":{"@id":"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/benjaminolsen.dev\/"},{"@type":"ListItem","position":2,"name":"CSS Clamp Generator"}]},{"@type":"WebSite","@id":"https:\/\/benjaminolsen.dev\/#website","url":"https:\/\/benjaminolsen.dev\/","name":"Benjamin Olsen","description":"","publisher":{"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/benjaminolsen.dev\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":["Person","Organization"],"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d","name":"Benjamin","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","caption":"Benjamin"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g"},"sameAs":["http:\/\/benjaminolsen.dev"]}]}},"_links":{"self":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":4,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":617,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions\/617"}],"wp:attachment":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}