Basal Metabolic Rate — calories your body burns at rest
Copy and paste the code below into any HTML page. No dependencies, no API keys.
<!-- BMR Calculator Widget by BodyCalc Tool -->
<div id="bmr-calc" style="max-width:400px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#27272a;color:#f4f4f5;border-radius:12px;padding:24px;border:1px solid #3f3f46">
<h2 style="font-size:1.15rem;color:#f97316;text-align:center;margin:0 0 4px">BMR Calculator</h2>
<p style="text-align:center;font-size:.78rem;color:#71717a;margin:0 0 14px">Basal Metabolic Rate</p>
<label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Gender
<select id="bmr-gender" onchange="bmrCalc()" style="width:100%;padding:9px 10px;margin-top:4px;border-radius:8px;border:1px solid #52525b;background:#18181b;color:#f4f4f5;font-size:.9rem"><option value="male">Male</option><option value="female">Female</option></select>
</label>
<label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Weight (kg)
<input type="number" id="bmr-weight" value="70" step="0.1" oninput="bmrCalc()" style="width:100%;padding:9px 10px;margin-top:4px;border-radius:8px;border:1px solid #52525b;background:#18181b;color:#f4f4f5;font-size:.9rem">
</label>
<label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Height (cm)
<input type="number" id="bmr-height" value="170" step="0.1" oninput="bmrCalc()" style="width:100%;padding:9px 10px;margin-top:4px;border-radius:8px;border:1px solid #52525b;background:#18181b;color:#f4f4f5;font-size:.9rem">
</label>
<label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Age
<input type="number" id="bmr-age" value="30" step="1" oninput="bmrCalc()" style="width:100%;padding:9px 10px;margin-top:4px;border-radius:8px;border:1px solid #52525b;background:#18181b;color:#f4f4f5;font-size:.9rem">
</label>
<button onclick="bmrCalc()" style="display:block;width:100%;margin-top:14px;padding:10px;font-size:.9rem;background:#f97316;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600">Calculate</button>
<div style="margin-top:16px;background:#18181b;border-radius:10px;padding:16px">
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #3f3f46;font-size:.85rem;color:#a1a1aa"><span>BMR</span><strong id="bmr-val" style="font-size:1.2rem;color:#fafafa">—</strong></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #3f3f46;font-size:.85rem;color:#a1a1aa"><span>Sedentary</span><strong id="bmr-sed" style="font-size:1.2rem;color:#fafafa">—</strong></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:.85rem;color:#a1a1aa"><span>Active</span><strong id="bmr-active" style="font-size:1.2rem;color:#fafafa">—</strong></div>
</div>
<div style="text-align:center;margin-top:12px;font-size:.75rem;color:#71717a">Powered by <a href="https://bodycalctool.com/" target="_blank" rel="noopener" style="color:#f97316;text-decoration:none">BodyCalc Tool</a></div>
</div>
<script>
function bmrCalc(){
var g=document.getElementById('bmr-gender').value,w=+document.getElementById('bmr-weight').value,h=+document.getElementById('bmr-height').value,a=+document.getElementById('bmr-age').value;
if(!w||!h||!a)return;
var bmr=g==='male'?10*w+6.25*h-5*a+5:10*w+6.25*h-5*a-161;
var f=function(n){return Math.round(n).toLocaleString()+' kcal/day'};
document.getElementById('bmr-val').textContent=f(bmr);
document.getElementById('bmr-sed').textContent=f(bmr*1.2);
document.getElementById('bmr-active').textContent=f(bmr*1.55);
}
bmrCalc();
<\/script>
The embed code is fully self-contained. The calculator works instantly anywhere you paste it.