h1 svg { width: 32px; height: 32px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; display: inline-block; vertical-align: text-bottom; margin-right: 10px; } :root{ --ink:#241b3e; --ink-soft:#5b5378; --paper:#fffdf7; --card:#ffffff; --sun:#ffb703; --coral:#fb5607; --pink:#ff3d81; --violet:#7b2ff7; --teal:#00bfa5; --sky:#2e9bff; --lime:#8ac926; --volt:#13d97b; --blue:#7b2ff7; --radius:22px; --shadow:0 10px 30px rgba(36,27,62,.10); --shadow-big:0 24px 60px rgba(36,27,62,.16); --grad-hero:linear-gradient(135deg,#7b2ff7 0%,#ff3d81 55%,#ffb703 110%); --grad-btn:linear-gradient(135deg,#ff3d81,#fb5607); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--paper);color:var(--ink);line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} /* Header */ header{ position:sticky;top:0;z-index:50; background:rgba(255,253,247,.85);backdrop-filter:blur(12px); border-bottom:2px solid rgba(36,27,62,.06); } .nav{display:flex;align-items:center;gap:18px;height:68px} .logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.45rem;text-decoration:none;color:var(--ink);letter-spacing:-.5px} .logo b{background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent} .switch-mark{ display:inline-flex;align-items:center;width:44px;height:26px;border-radius:999px; background:linear-gradient(135deg,#8a93b8,#565d85);padding:3px;transition:.25s; box-shadow:inset 0 2px 4px rgba(36,27,62,.35);flex:none; } .switch-mark .knob{ width:20px;height:20px;border-radius:50%;background:#fff;transition:.25s cubic-bezier(.5,1.8,.5,1); box-shadow:0 2px 5px rgba(36,27,62,.35); } .logo:hover .switch-mark{background:linear-gradient(135deg,var(--volt),#0db56a)} .logo:hover .switch-mark .knob{transform:translateX(18px)} .nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap} .nav-links a{ text-decoration:none;color:var(--ink-soft);font-weight:800;font-size:.92rem; padding:8px 14px;border-radius:999px;transition:.18s; } .nav-links a:hover{background:rgba(46,99,255,.1);color:var(--blue)} .menu-toggle{display:none;background:none;border:none;cursor:pointer;font-size:1.8rem;color:var(--ink);padding:8px 12px;margin-left:auto} /* Hero Section */ .hero{background:var(--grad-hero);padding:56px 0 72px;color:#fff;text-align:center} .hero h1{font-size:2.4rem;font-weight:900;line-height:1.2} section{padding:48px 0} /* Language Switcher */ .language-switcher { margin-left: auto; display: flex; align-items: center; } .language-switcher select { padding: 8px 12px; border: 2px solid var(--blue); border-radius: 6px; background: #fff; color: var(--ink); font-weight: 700; cursor: pointer; font-size: 0.9rem; font-family: inherit; transition: .2s; } .language-switcher select:hover { background: rgba(123, 47, 247, 0.05); border-color: var(--blue); } .language-switcher select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(123, 47, 247, 0.12); } @media(max-width:760px){ .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:rgba(255,253,247,.98);backdrop-filter:blur(12px);flex-direction:column;padding:12px 0;border-bottom:1px solid rgba(36,27,62,.1);max-height:70vh;overflow-y:auto;z-index:40} .nav-links.active{display:flex} .nav-links a{padding:14px 20px;border-radius:0;border-bottom:1px solid rgba(36,27,62,.05);width:100%} .nav-links a:hover{background:rgba(46,99,255,.08)} .menu-toggle{display:block} } /* Converter Card */ .conv-card{ background:var(--card);border-radius:var(--radius); box-shadow:var(--shadow);padding:32px;margin:48px 0; } .conv-grid{ display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:end;margin-bottom:24px; } .field{display:flex;flex-direction:column} .field label{font-weight:900;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin-bottom:8px} .field input{ font-family:inherit;font-size:1.1rem;font-weight:800;padding:14px; border:2px solid #e3e9f7;border-radius:12px;outline:none;transition:.15s;min-height:50px; } .field input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,99,255,.12)} input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} input[type="number"]{-moz-appearance:textfield} .field select{ font-family:inherit;font-size:1rem;font-weight:800;padding:12px; border:2px solid #e3e9f7;border-radius:12px;outline:none;transition:.15s;min-height:50px;cursor:pointer; } .field select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(46,99,255,.12)} .swap-btn{ background:none;border:none;font-size:1.8rem;cursor:pointer; padding:8px;transition:.2s;color:var(--ink-soft); } .swap-btn:hover{transform:rotate(180deg);color:var(--blue)} .result-line{ background:rgba(46,99,255,.05);border-radius:12px;padding:20px; display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between; } .big{ font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;color:var(--blue); flex:1;min-width:180px; } .formula{color:var(--ink-soft);font-size:.95rem;flex:1;min-width:200px} .copy-btn{ background:var(--grad-btn);color:#fff;border:none;padding:12px 24px; border-radius:999px;font-weight:900;cursor:pointer;transition:.2s; font-size:.95rem;white-space:nowrap; } .copy-btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.15)} .toast{ position:fixed;bottom:-60px;left:50%;transform:translateX(-50%); background:var(--blue);color:#fff;padding:14px 24px;border-radius:999px; font-weight:700;transition:.3s;z-index:100; } .toast.show{bottom:24px} .table-scroll{ overflow-x:auto;position:relative; background:linear-gradient(to right,transparent,rgba(255,255,255,.8)) no-repeat right; text-align:center; } table{ width:100%;border-collapse:collapse;margin:0 auto; } table th{ background:var(--ink);color:#fff;font-size:.85rem;text-transform:uppercase; letter-spacing:1px;padding:13px 18px;text-align:left;font-weight:900; } table td{ padding:11px 18px;font-weight:700;border-bottom:1.5px solid #e9eefa; } table tr:nth-child(even) td{background:#fafcff} table tr:last-child td{border-bottom:0} h1, h2, h3, h4 {font-family:'Nunito',sans-serif} h1, h2 {text-align:center} footer{ background:var(--ink);color:#fff;padding:40px 0 32px; margin-top:60px;text-align:center; } footer a{color:var(--volt);text-decoration:none;font-weight:700} @media(max-width:640px){ .conv-grid{grid-template-columns:1fr;gap:12px} .field input,.field select{min-height:48px;font-size:1rem} .result-line{flex-direction:column;align-items:flex-start} .big{width:100%} .copy-btn{width:100%} }

Unit Converter

Convert length, weight, temperature, volume, speed, data and more

—

Conversion table for length

Copied!

Recommended Units & Measurement Tools

Quality products for your units & measurement needs:

Measuring Tapes Rulers Reference Charts Scales

As Amazon Associates, we earn from qualifying purchases.