\r\n

VAT Calculator UK 2026\/2027<\/h1>\n
Fast, accurate VAT calculations for accountants and finance teams. Choose add VAT or remove VAT, set the correct rate, and get a clean breakdown with values you can copy into your work papers.<\/p>\n <\/div>\r\n
\r\n $\"\"$ <\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n\n\n\n \n\n \n\n \n\n \n\n \n\n VAT Calculator UK 2026\/2027 | QX Accounting Services<\/title> \n\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\"> \n\n <style> \n\n :root{ \n\n \/* QX Accounting Services inspired brand colours from the screenshot \/ \n\n --qx-primary:#5b3df5; \/ purple \/ \n\n --qx-primary-700:#4931c4; \/ darker purple \/ \n\n --qx-primary-100:#efeaff; \/ light tint \/ \n\n --qx-accent:#ff5a5f; \/ coral button seen on site \/ \n\n --qx-ink:#0f1020; \/ near black for headings \/ \n\n --qx-text:#3b3b4f; \/ body text \/ \n\n --qx-border:#e8e8f3; \/ subtle border \/ \n\n --qx-bg:#fafafe; \/ page background \/ \n\n --radius:18px; \n\n --shadow:0 10px 25px rgba(18, 16, 99, .08); \n\n } \n\n {box-sizing:border-box} \n\n html,body{margin:0; padding:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, \"Apple Color Emoji\",\"Segoe UI Emoji\"; color:var(--qx-text); background:var(--qx-bg)} \n\n #clkmain .container{max-width:1100px; margin:0 auto; padding:28px 16px 56px} \n\n \n\n \n\n .badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; background:var(--qx-primary-100); color:var(--qx-primary); border-radius:999px; font-weight:600; font-size:12px; letter-spacing:.2px} \n\n \n .subtext{font-size:16px; max-width:760px} \n\n \n\n \/* Card \/ \n\n .card{background:#fff; border:1px solid var(--qx-border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px} \n\n .grid{display:grid; gap:18px} \n\n @media(min-width:880px){.grid{grid-template-columns:1.1fr .9fr}} \n\n \n\n \/ Tabs \/ \n\n .tabs{display:inline-flex; background:#fff; border:1px solid var(--qx-border); border-radius:12px; padding:4px} \n\n .tab{cursor:pointer; padding:10px 14px; border-radius:10px; border:none; background:transparent; font-weight:600; color:var(--qx-ink)} \n\n .tab[aria-selected=\"true\"]{background:var(--qx-primary); color:#fff} \n\n \n\n \/ Form \/ \n\n .form-row{display:grid; gap:10px} \n\n label{font-weight:600; color:var(--qx-ink); font-size:14px} \n\n input[type=\"number\"], select{width:100%; padding:12px 12px; border:1px solid var(--qx-border); border-radius:12px; outline:none; transition:border .2s, box-shadow .2s; font-size:15px} \n\n input[type=\"number\"]:focus, select:focus{border-color:var(--qx-primary); box-shadow:0 0 0 4px rgba(91,61,245,.12)} \n\n \n\n .rates{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} \n\n @media(min-width:560px){.rates{grid-template-columns:repeat(4,minmax(0,1fr))}} \n\n .rate{border:1px solid var(--qx-border); border-radius:12px; padding:12px; display:flex; gap:8px; align-items:center; cursor:pointer} \n\n .rate input{accent-color:var(--qx-primary)} \n\n \n\n .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px} \n\n .btn{appearance:none; border:none; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer} \n\n .btn-primary{background:var(--qx-primary); color:#fff} \n\n .btn-primary:hover{background:var(--qx-primary-700)} \n\n .btn-accent{background:var(--qx-accent); color:#fff} \n\n .btn-ghost{background:#fff; border:1px solid var(--qx-border); color:var(--qx-ink)} \n\n \n\n \/ Results \/ \n\n .results{background:#fff; border:1px solid var(--qx-border); border-radius:12px; padding:16px} \n\n .results h3{margin:4px 0 12px; color:var(--qx-ink)} \n\n .stat{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px dashed #eee} \n\n .stat:last-child{border-bottom:none} \n\n .stat .label{color:#676784} \n\n .stat .value{font-weight:800; color:var(--qx-ink)} \n\n \n\n .help{font-size:13px; color:#636688} \n\n .error{color:#b42318; background:#fee4e2; border:1px solid #fecdca; padding:10px 12px; border-radius:10px; display:none} \n\n .muted{color:#7a7ea8; font-size:12px} \n\n \n\n .labl_footer{margin-top:32px; font-size:12px; color:#6b6f91} \n\n <\/style> \n\n<\/head> \n\n<body> \n\n \n <main class=\"container\" role=\"main\" id=\"clkmain\"> \n\n <div class=\"card grid\" aria-live=\"polite\"> \n\n  \n\n <section> \n\n <div class=\"form-row\" style=\"margin-bottom:8px\"> \n\n <label for=\"mode\" class=\"muted\">Mode<\/label> \n\n <div class=\"tabs\" role=\"tablist\" aria-label=\"VAT mode\"> \n\n <button id=\"tab-add\" class=\"tab\" role=\"tab\" aria-selected=\"true\" aria-controls=\"panel-add\">Add VAT<\/button> \n\n <button id=\"tab-remove\" class=\"tab\" role=\"tab\" aria-selected=\"false\" aria-controls=\"panel-remove\">Remove VAT<\/button> \n\n <\/div> \n\n <\/div> \n\n \n\n <div id=\"panel-add\" role=\"tabpanel\" aria-labelledby=\"tab-add\"> \n\n <div class=\"form-row\"> \n\n <label for=\"netAmount\">Net amount (\u00a3)<\/label> \n\n <input id=\"netAmount\" type=\"number\" inputmode=\"decimal\" step=\"0.01\" min=\"0\" placeholder=\"0.00\" aria-describedby=\"netHelp\" \/> \n\n <small id=\"netHelp\" class=\"help\">Enter the price before VAT to add VAT and find the gross.<\/small> \n\n <\/div> \n\n <\/div> \n\n <div id=\"panel-remove\" role=\"tabpanel\" aria-labelledby=\"tab-remove\" hidden> \n\n <div class=\"form-row\"> \n\n <label for=\"grossAmount\">Gross amount (\u00a3)<\/label> \n\n <input id=\"grossAmount\" type=\"number\" inputmode=\"decimal\" step=\"0.01\" min=\"0\" placeholder=\"0.00\" aria-describedby=\"grossHelp\" \/> \n\n <small id=\"grossHelp\" class=\"help\">Enter the price including VAT to remove VAT and find the net.<\/small> \n\n <\/div> \n\n <\/div> \n\n \n\n <div class=\"form-row\" style=\"margin-top:8px\"> \n\n <label>VAT rate<\/label> \n\n <div class=\"rates\" role=\"group\" aria-label=\"VAT rate options\"> \n\n <label class=\"rate\"><input type=\"radio\" name=\"rate\" value=\"20\" checked> <span>20% Standard<\/span><\/label> \n\n <label class=\"rate\"><input type=\"radio\" name=\"rate\" value=\"5\"> <span>5% Reduced<\/span><\/label> \n\n <label class=\"rate\"><input type=\"radio\" name=\"rate\" value=\"0\"> <span>0% Zero<\/span><\/label> \n\n <label class=\"rate\" title=\"Set a custom rate\"> \n\n <input type=\"radio\" name=\"rate\" value=\"custom\" id=\"rateCustomRadio\"> <span>Custom<\/span> \n\n <\/label> \n\n <\/div> \n\n <div class=\"form-row\" id=\"customWrap\" style=\"display:none\"> \n\n <label for=\"customRate\">Custom rate (%)<\/label> \n\n <input id=\"customRate\" type=\"number\" inputmode=\"decimal\" step=\"0.01\" min=\"0\" placeholder=\"e.g. 12.5\" \/> \n\n <\/div> \n\n <\/div> \n\n \n\n <div id=\"errorBox\" class=\"error\" role=\"alert\">Please enter a valid positive amount.<\/div> \n\n <div class=\"actions\"> \n\n <button class=\"btn btn-primary\" id=\"calcBtn\">Calculate<\/button> \n\n <button class=\"btn btn-ghost\" id=\"resetBtn\" type=\"button\">Reset<\/button> \n\n <button class=\"btn btn-accent\" id=\"copyBtn\" type=\"button\">Copy results<\/button> \n\n <\/div> \n\n <p class=\"muted\" style=\"margin-top:8px\">Rates reflect HMRC categories. Always confirm VAT treatment for your client\u2019s specific supply.<\/p> \n\n <\/section> \n\n \n\n  \n\n <section> \n\n <div class=\"results\" id=\"results\"> \n\n <h3>Breakdown<\/h3> \n\n <div class=\"stat\"><span class=\"label\" id=\"lblMode\">Net amount<\/span><span class=\"value\" id=\"valBase\">\u00a30.00<\/span><\/div> \n\n <div class=\"stat\"><span class=\"label\">VAT rate<\/span><span class=\"value\" id=\"valRate\">20%<\/span><\/div> \n\n <div class=\"stat\"><span class=\"label\">VAT amount<\/span><span class=\"value\" id=\"valVat\">\u00a30.00<\/span><\/div> \n\n <div class=\"stat\"><span class=\"label\" id=\"lblTotal\">Gross amount<\/span><span class=\"value\" id=\"valTotal\">\u00a30.00<\/span><\/div> \n\n <\/div> \n\n <p class=\"help\" style=\"margin-top:10px\">Tip: switch mode to move between adding VAT to a net price or removing VAT from a gross price.<\/p> \n\n <\/section> \n\n <\/div> \n\n \n\n <div class=\"labl_footer\"> \n\n Built for accountants. Styled with the QX Accounting Services colour system so it drops straight into your site. \n\n <\/div> \n\n <\/main> \n\n \n\n <script> \n\n (function(){ \n\n const el = id => document.getElementById(id); \n\n const q = sel => document.querySelector(sel); \n\n const formatGBP = n => new Intl.NumberFormat('en-GB', {style:'currency', currency:'GBP'}).format(n || 0); \n\n \n\n const tabAdd = el('tab-add'); \n\n const tabRemove = el('tab-remove'); \n\n const panelAdd = el('panel-add'); \n\n const panelRemove = el('panel-remove'); \n\n const netAmount = el('netAmount'); \n\n const grossAmount = el('grossAmount'); \n\n const rateRadios = () => Array.from(document.querySelectorAll('input[name=\"rate\"]')); \n\n const rateCustomRadio = el('rateCustomRadio'); \n\n const customWrap = el('customWrap'); \n\n const customRate = el('customRate'); \n\n \n\n const lblMode = el('lblMode'); \n\n const lblTotal = el('lblTotal'); \n\n const valBase = el('valBase'); \n\n const valRate = el('valRate'); \n\n const valVat = el('valVat'); \n\n const valTotal = el('valTotal'); \n\n const errorBox = el('errorBox'); \n\n \n\n let mode = 'add'; \/\/ add or remove \n\n \n\n \/\/ Tabs behaviour \n\n function setMode(next){ \n\n mode = next; \n\n const addSelected = next === 'add'; \n\n tabAdd.setAttribute('aria-selected', addSelected); \n\n tabRemove.setAttribute('aria-selected', !addSelected); \n\n panelAdd.hidden = !addSelected; \n\n panelRemove.hidden = addSelected; \n\n lblMode.textContent = addSelected ? 'Net amount' : 'Gross amount'; \n\n lblTotal.textContent = addSelected ? 'Gross amount' : 'Net amount'; \n\n errorBox.style.display = 'none'; \n\n } \n\n \n\n tabAdd.addEventListener('click', () => setMode('add')); \n\n tabRemove.addEventListener('click', () => setMode('remove')); \n\n \n\n \/\/ Rate handling \n\n document.addEventListener('change', (e)=>{ \n\n if(e.target && e.target.name === 'rate'){ \n\n const isCustom = e.target.value === 'custom'; \n\n customWrap.style.display = isCustom ? 'grid' : 'none'; \n\n } \n\n }); \n\n \n\n \/\/ Calculate \n\n function getRate(){ \n\n const selected = rateRadios().find(r => r.checked); \n\n if(!selected) return 20; \n\n if(selected.value === 'custom'){ \n\n const r = parseFloat(customRate.value); \n\n return isFinite(r) && r >= 0 ? r : NaN; \n\n } \n\n return parseFloat(selected.value); \n\n } \n\n \n\n function validateAmount(n){ \n\n return typeof n === 'number' && isFinite(n) && n >= 0; \n\n } \n\n \n\n function calculate(){ \n\n const rate = getRate(); \n\n if(!isFinite(rate)){ \n\n errorBox.textContent = 'Please enter a valid custom VAT rate.'; \n\n errorBox.style.display = 'block'; \n\n return; \n\n } \n\n const base = mode === 'add' ? parseFloat(netAmount.value) : parseFloat(grossAmount.value); \n\n if(!validateAmount(base)){ \n\n errorBox.textContent = 'Please enter a valid positive amount.'; \n\n errorBox.style.display = 'block'; \n\n return; \n\n } \n\n errorBox.style.display = 'none'; \n\n \n\n let vat = 0, total = 0; \n\n if(mode === 'add'){ \n\n vat = base (rate\/100); \n\n total = base + vat; \n\n } else { \n\n \/\/ removing VAT: base is gross, find net and VAT \n\n const divisor = 1 + (rate\/100); \n\n const net = rate === 0 ? base : base \/ divisor; \n\n vat = base - net; \n\n total = net; \/\/ for display we call this total, but label shows Net amount \n\n } \n\n \n\n \/\/ Update UI \n\n valBase.textContent = formatGBP(base); \n\n valRate.textContent = `${(rate || 0).toFixed(2).replace(\/\\.00$\/,'')}%`; \n\n valVat.textContent = formatGBP(vat); \n\n valTotal.textContent = formatGBP(total); \n\n } \n\n \n\n el('calcBtn').addEventListener('click', calculate); \n\n \n\n \/\/ Reset \n\n el('resetBtn').addEventListener('click', ()=>{ \n\n netAmount.value = ''; \n\n grossAmount.value = ''; \n\n customRate.value = ''; \n\n rateRadios()[0].checked = true; \/\/ 20% \n\n customWrap.style.display = 'none'; \n\n errorBox.style.display = 'none'; \n\n valBase.textContent = '\u00a30.00'; \n\n valRate.textContent = '20%'; \n\n valVat.textContent = '\u00a30.00'; \n\n valTotal.textContent = '\u00a30.00'; \n\n setMode('add'); \n\n }); \n\n \n\n \/\/ Copy results to clipboard \n\n el('copyBtn').addEventListener('click', async ()=>{ \n\n const text = [ \n\n `${lblMode.textContent}: ${valBase.textContent}`, \n\n `VAT rate: ${valRate.textContent}`, \n\n `VAT amount: ${valVat.textContent}`, \n\n `${lblTotal.textContent}: ${valTotal.textContent}` \n\n ].join('\\n'); \n\n try{ \n\n await navigator.clipboard.writeText(text); \n\n el('copyBtn').textContent = 'Copied'; \n\n setTimeout(()=> el('copyBtn').textContent = 'Copy results', 1400); \n\n }catch{ \n\n alert('Copied values:\\n\\n' + text); \n\n } \n\n }); \n\n \n\n \/\/ Enter to calculate \n\n [netAmount, grossAmount, customRate].forEach(i => i && i.addEventListener('keydown', e=>{ if(e.key==='Enter'){ e.preventDefault(); calculate(); }})); \n\n \n\n \/\/ Initialise \n\n setMode('add'); \n\n })(); \n\n <\/script> \n\n<\/body> \n\n<\/html>\n\n\n<section class=\"cussto-ctabox calculator-cta\">\r\n<div class=\"container\">\r\n<div class=\"row justify-content-center text-start text-sm-center\">\r\n<div class=\"col-lg-9 col-xxl-8 position-relative z-1\">\r\n <h3>Your Next Move Starts Here<\/h3>\n<p>Book a short call to explore how our specialist teams can help you turn these results into stronger outcomes for your clients and your firm.<\/p>\n<div class=\"bookmytime gap-4 flex-column flex-sm-row text-start d-flex mx-auto\">\r\n<div class=\"photobox\">\r\n <div class=\"photo\">\r\n <img decoding=\"async\" src=\"https:\/\/qxaccounting.com\/uk\/wp-content\/uploads\/sites\/2\/2025\/10\/Swati-Yadav.webp\" alt=\"\">\r\n<\/div>\r\n<a target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/sy05\/\" class=\"linkedin\"><img decoding=\"async\" src=\"https:\/\/qxaccounting.com\/uk\/wp-content\/themes\/qxaccount\/assets\/images\/common\/Linkedin.png\" alt=\"\"><\/a><\/div>\r\n<div class=\"d-flex flex-column align-items-start\">\r\n<h5>Swati Yadav<\/h5>\r\n<h6>Business Development Manager QXAS<\/h6>\r\n <a target=\"_blank\" href=\"https:\/\/meetings.hubspot.com\/swati-yadav\">Book My Time <i><img decoding=\"async\" src=\"https:\/\/qxaccounting.com\/uk\/wp-content\/themes\/qxaccount\/assets\/images\/SVG\/calendar_month_30.svg\" alt=\"\"><\/i>\r\n<\/a> <\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>\r\n","protected":false},"excerpt":{"rendered":"<p>VAT Calculator UK 2026\/2027 | QX Accounting Services Mode Add VAT Remove VAT Net amount (\u00a3) Enter the price before VAT to add VAT and find the gross. Gross amount (\u00a3) Enter the price including VAT to remove VAT and find the net. VAT rate 20% Standard 5% Reduced 0% Zero Custom Custom rate (%) […]<\/p>\n","protected":false},"author":2,"featured_media":9880,"parent":9868,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template\/home-new.php","meta":{"_acf_changed":true,"footnotes":""},"class_list":["post-9877","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/qxaccounting.com\/uk\/wp-json\/wp\/v2\/pages\/9877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxaccounting.com\/uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qxaccounting.com\/uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qxaccounting.com\/uk\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/qxaccounting.com\/uk\/wp-json\/wp\/v2\/comments?post=9877"}],"version-history":[{"count":0,"href":"https:\/\/qxaccounting.com\/uk\/wp-json\/wp\/v2\/pages\/9877\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/qxaccounting.com\/uk\/wp-json\/wp\/v2\/pages\/9868"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qxaccounting.com\/uk\/wp-json\/wp\/v2\/media\/9880"}],"wp:attachment":[{"href":"https:\/\/qxaccounting.com\/uk\/wp-json\/wp\/v2\/media?parent=9877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}