:root { --bg-primary: #0a0a0f; --accent: #10b981; --accent-light: #34d399; --text-primary: #ffffff; --text-secondary: #94a3b8; --glass: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.08); --border: rgba(16, 185, 129, 0.3); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; } .bg-glow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 50% -20%, rgba(16, 185, 129, 0.15), transparent 70%); z-index: -1; } .container { max-width: 800px; margin: 0 auto; padding: 40px 20px; } .glass { background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 24px; padding: 30px; } .header { text-align: center; margin-bottom: 40px; } .header h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 10px; background: linear-gradient(135deg, #fff, var(--accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .header p { color: var(--text-secondary); font-size: 1.1rem; } .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; } @media (max-width: 600px) { .calc-grid { grid-template-columns: 1fr; } } .unit-toggle { display: flex; background: rgba(255,255,255,0.05); padding: 5px; border-radius: 12px; margin-bottom: 30px; } .unit-btn { flex: 1; padding: 12px; border: none; background: transparent; color: var(--text-secondary); font-weight: 600; cursor: pointer; border-radius: 8px; transition: all 0.3s; } .unit-btn.active { background: var(--accent); color: white; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); } .input-group { margin-bottom: 20px; } .input-group label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-weight: 500; font-size: 0.9rem; } .input-wrapper { position: relative; } .input-wrapper input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); border-radius: 12px; padding: 14px 16px; color: white; font-size: 1.1rem; outline: none; transition: all 0.3s; } .input-wrapper input:focus { border-color: var(--accent); background: rgba(16, 185, 129, 0.05); } .unit-label { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.9rem; font-weight: 600; } .calculate-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, var(--accent), #059669); border: none; border-radius: 16px; color: white; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.3s; margin-top: 10px; } .calculate-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3); } /* Result Section */ #resultCard { display: none; margin-top: 30px; text-align: center; border-color: var(--border); } .bmi-value { font-size: 4rem; font-weight: 900; margin-bottom: 5px; color: var(--accent-light); } .bmi-status { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; } .gauge-container { width: 100%; height: 12px; background: rgba(255,255,255,0.1); border-radius: 99px; position: relative; margin: 30px 0; overflow: hidden; } .gauge-bar { height: 100%; width: 0%; transition: width 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-radius: 99px; } .gauge-markers { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 0.7rem; margin-top: 8px; font-weight: 600; } .info-box { background: rgba(16, 185, 129, 0.05); border: 1px dashed var(--border); border-radius: 16px; padding: 20px; margin-top: 25px; text-align: left; } .info-box h3 { font-size: 1rem; margin-bottom: 8px; color: var(--accent-light); } .info-box p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; } .bmi-chart { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; } .chart-item { padding: 10px; border-radius: 10px; font-size: 0.75rem; text-align: center; background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border); } .chart-item.active { border-color: var(--accent); background: rgba(16, 185, 129, 0.1); } .chart-item b { display: block; margin-bottom: 4px; font-size: 0.85rem; } .footer-nav { text-align: center; margin-top: 50px; } .back-link { color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: color 0.3s; } .back-link:hover { color: var(--accent-light); } /* ─── BLOG POST SECTION ─── */ .blog-card { padding: 36px 32px; margin-bottom: 40px; border-left: 4px solid var(--ig-pink, #E1306C); } .blog-card h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: 16px; background: linear-gradient(135deg, var(--ig-purple, #833AB4), var(--ig-pink, #E1306C), var(--ig-orange, #F77737)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .blog-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--text-primary, #fff); margin-top: 24px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .blog-card h3 i { color: var(--ig-pink, #E1306C); font-size: 1rem; } .blog-card p { font-size: 0.95rem; color: var(--text-secondary, #e2e8f0); line-height: 1.8; margin-bottom: 16px; } .blog-card ul { list-style: none; margin-bottom: 20px; padding-left: 0; } .blog-card li { position: relative; padding-left: 28px; margin-bottom: 12px; font-size: 0.92rem; color: var(--text-secondary, #e2e8f0); line-height: 1.6; } .blog-card li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--success, #22c55e); font-size: 0.9rem; } .blog-card strong { color: var(--text-primary, #fff); font-weight: 600; }
Back to Tools

BMI Health Calculator

Calculate your Body Mass Index and track your health status

kg
cm

YOUR BMI IS

24.5
Normal Weight
Underweight Normal Overweight Obese

Health Insights

You have a healthy body weight. Maintain a balanced diet and regular exercise to stay in this range.

< 18.5Underweight
18.5 - 24.9Normal
25.0 - 29.9Overweight
> 30.0Obese

Frequently Asked Questions

What is a healthy BMI range for adults?
How is BMI calculated?
Is BMI accurate for athletes or muscular people?

Why BMI Matters?

Body Mass Index (BMI) is a simple index of weight-for-height that is commonly used to classify underweight, overweight and obesity in adults. It is defined as the weight in kilograms divided by the square of the height in metres (kg/m²).

Understanding Your Body Mass Index (BMI)

Your health is your greatest wealth. The Body Mass Index (BMI) is a simple, widely used calculation that uses your height and weight to determine if you are in a healthy weight range. Our free online BMI Calculator provides instant insights into your current health status.

Why BMI Matters

While BMI isn't a perfect measure of body fat (as it doesn't account for muscle mass), it is an excellent baseline indicator. It helps medical professionals quickly assess potential risks for chronic conditions like heart disease, high blood pressure, and type 2 diabetes.

Next Steps

If your BMI falls outside the 'Normal' range, don't panic. Consider consulting a healthcare provider or a registered dietitian to discuss a personalized plan that includes balanced nutrition and regular exercise.