<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VAT Calculator</title>
<meta name="title" content="VAT Calculator" />
<meta name="description" content="VAT calculator that instantly adds or removes VAT percentages from any value. Calculate VAT-inclusive and VAT-exclusive amounts effortlessly." />
<meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/>
<link rel="canonical" href="https://vatcalculator.com/">
<style>
*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.left-3{left:0.75rem}.top-1\/2{top:50%}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mt-0\.5{margin-top:0.125rem}.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-3{margin-top:0.75rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.h-4{height:1rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-auto{height:auto}.min-h-screen{min-height:100vh}.w-4{width:1rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-auto{width:auto}.w-full{width:100%}.max-w-3xl{max-width:48rem}.flex-1{flex:1 1 0%}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.rounded-none{border-radius:0px}.border{border-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-\[\#f0f7ff\]{--tw-gradient-from:#f0f7ff var(--tw-gradient-from-position);--tw-gradient-to:rgb(240 247 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.p-0{padding:0px}.p-2{padding:0.5rem}.p-3{padding:0.75rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-4{padding-bottom:1rem}.pl-8{padding-left:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.tracking-tighter{letter-spacing:-0.05em}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity, 1))}.has-\[\:checked\]\:border-blue-500:has(:checked){--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.has-\[\:checked\]\:bg-blue-50:has(:checked){--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}@media (min-width: 640px){.sm\:col-span-2{grid-column:span 2 / span 2}.sm\:h-10{height:2.5rem}.sm\:w-10{width:2.5rem}.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.sm\:gap-4{gap:1rem}.sm\:p-4{padding:1rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-sm{font-size:0.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width: 768px){.md\:col-span-1{grid-column:span 1 / span 1}.md\:mt-4{margin-top:1rem}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:gap-4{gap:1rem}.md\:space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.md\:p-4{padding:1rem}.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.md\:py-12{padding-top:3rem;padding-bottom:3rem}.md\:py-8{padding-top:2rem;padding-bottom:2rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:0.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:flex-row { flex-direction: row; }
.md\:items-center { align-items: center; }
.md\:justify-between { justify-content: space-between; }
.md\:mt-0 { margin-top: 0px; }
.md\:ml-4 { margin-left: 1rem; }
.md\:text-left { text-align: left; }
@media (min-width: 1024px){.lg\:py-16{padding-top:4rem;padding-bottom:4rem}}
.ml-4 { margin-left: 1rem; }
</style>
<script>
!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug getPageViewId captureTraceFeedback captureTraceMetric".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
posthog.init('phc_tVNrxkcDOUijfCG9nh1Y5yLH2btP2hmbVZycMLOvUlU', {
api_host: 'https://eu.i.posthog.com',
person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
})
</script>
</head>
<body class="flex min-h-screen flex-col bg-white">
<header style="background-color: #0b1d46;">
<div class="container mx-auto px-4 flex h-16 items-center py-4">
<a href="https://vatcalculator.com" class="flex items-center">
<img
src="https://vatcalculator.com/VAT-Calculator-Logo.svg"
alt="VAT Calculator Logo"
class="h-8 w-auto"
/>
</a>
</div>
</header>
<main class="flex-1">
<!-- Hero section with simple background -->
<div class="bg-gradient-to-b from-[#f0f7ff] to-white">
<section class="container mx-auto px-4 py-6 md:py-10 lg:py-16">
<div class="mx-auto max-w-3xl space-y-4 md:space-y-6">
<div class="text-center space-y-2">
<h1 class="text-2xl md:text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl cursor-default">
VAT Calculator
</h1>
</div>
<div class="rounded-lg border shadow-sm overflow-hidden bg-white">
<!-- Tabs -->
<div class="w-full">
<!-- Tab headers -->
<div class="grid w-full grid-cols-2 p-0 h-auto bg-slate-100">
<button
id="tab-add"
class="flex items-center justify-center gap-2 py-3 rounded-none bg-white border-b-2 border-blue-500 transition-all"
onclick="switchTab('add')"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/><path d="M12 8v8"/></svg>
<span>Add VAT</span>
</button>
<button
id="tab-remove"
class="flex items-center justify-center gap-2 py-3 rounded-none border-b-2 border-transparent transition-all"
onclick="switchTab('remove')"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><circle cx="12" cy="12" r="10"/><path d="M8 12h8"/></svg>
<span>Remove VAT</span>
</button>
</div>
<!-- Tab content -->
<div id="tab-content-add" class="block">
<div class="px-3 py-4 sm:px-6">
<h2 class="text-lg md:text-xl font-semibold cursor-default">
Add VAT to an amount
</h2>
<p class="text-xs md:text-sm text-gray-500 cursor-default">
Calculate how much VAT to add to a net amount
</p>
</div>
<div class="px-3 pb-4 space-y-4 sm:px-6">
<div class="space-y-2">
<label for="amount-add" class="block text-sm md:text-base font-medium cursor-default">
Net Amount (excluding VAT)
</label>
<div class="relative">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 cursor-default">
£
</span>
<input
id="amount-add"
type="text"
inputmode="decimal"
placeholder="0.00"
class="w-full pl-8 text-base rounded-md border border-gray-300 py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
oninput="calculateVAT('add')"
/>
</div>
</div>
<div class="space-y-2">
<label class="block text-sm md:text-base font-medium cursor-default">VAT Rate</label>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2" id="vat-rate-add">
<label
class="flex cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white p-2 text-sm hover:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50"
>
<input type="radio" name="vat-rate-add" value="20" class="sr-only" checked onchange="calculateVAT('add')" />
<span>Standard (20%)</span>
</label>
<label
class="flex cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white p-2 text-sm hover:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50"
>
<input type="radio" name="vat-rate-add" value="5" class="sr-only" onchange="calculateVAT('add')" />
<span>Reduced (5%)</span>
</label>
<label
class="flex cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white p-2 text-sm hover:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50"
>
<input type="radio" name="vat-rate-add" value="0" class="sr-only" onchange="calculateVAT('add')" />
<span>Zero (0%)</span>
</label>
<label
class="flex cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white p-2 text-sm hover:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50"
>
<input type="radio" name="vat-rate-add" value="custom" class="sr-only" onchange="calculateVAT('add')" />
<span>Custom</span>
</label>
</div>
<div id="custom-rate-container-add" class="mt-2 hidden">
<label for="custom-rate-add" class="block text-sm md:text-base font-medium cursor-default">
Custom Rate (%)
</label>
<input
id="custom-rate-add"
type="number"
min="0"
max="100"
step="0.1"
value="15"
placeholder="Enter VAT rate"
class="mt-1 w-full text-base rounded-md border border-gray-300 py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
oninput="calculateVAT('add')"
/>
</div>
</div>
<hr class="my-4 border-gray-200" />
<div class="space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div>
<p class="text-xs sm:text-sm font-medium text-gray-500 cursor-default">Net Amount</p>
<p id="net-amount-add" class="text-lg sm:text-xl md:text-2xl font-bold cursor-default">
£0.00
</p>
</div>
<div>
<p class="text-xs sm:text-sm font-medium text-gray-500 cursor-default">
VAT Amount (<span id="vat-rate-display-add">20</span>%)
</p>
<p id="vat-amount-add" class="text-lg sm:text-xl md:text-2xl font-bold cursor-default">
£0.00
</p>
</div>
</div>
<div class="rounded-lg bg-gray-100 p-3 sm:p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-xs sm:text-sm font-medium text-gray-500 cursor-default">Gross Amount</p>
<p id="gross-amount-add" class="text-lg sm:text-xl md:text-2xl font-bold cursor-default">
£0.00
</p>
</div>
<button
onclick="copyAmount('add')"
title="Copy gross amount"
class="h-8 w-8 sm:h-10 sm:w-10 rounded-md border border-gray-300 bg-white flex items-center justify-center hover:bg-gray-50"
>
<svg id="copy-icon-add" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
<svg id="check-icon-add" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 hidden"><path d="M20 6 9 17l-5-5"/></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="tab-content-remove" class="hidden">
<div class="px-3 py-4 sm:px-6">
<h2 class="text-lg md:text-xl font-semibold cursor-default">
Remove VAT from an amount
</h2>
<p class="text-xs md:text-sm text-gray-500 cursor-default">
Calculate how much VAT is included in a gross amount
</p>
</div>
<div class="px-3 pb-4 space-y-4 sm:px-6">
<div class="space-y-2">
<label for="amount-remove" class="block text-sm md:text-base font-medium cursor-default">
Gross Amount (including VAT)
</label>
<div class="relative">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 cursor-default">
£
</span>
<input
id="amount-remove"
type="text"
inputmode="decimal"
placeholder="0.00"
class="w-full pl-8 text-base rounded-md border border-gray-300 py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
oninput="calculateVAT('remove')"
/>
</div>
</div>
<div class="space-y-2">
<label class="block text-sm md:text-base font-medium cursor-default">VAT Rate</label>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2" id="vat-rate-remove">
<label
class="flex cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white p-2 text-sm hover:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50"
>
<input type="radio" name="vat-rate-remove" value="20" class="sr-only" checked onchange="calculateVAT('remove')" />
<span>Standard (20%)</span>
</label>
<label
class="flex cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white p-2 text-sm hover:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50"
>
<input type="radio" name="vat-rate-remove" value="5" class="sr-only" onchange="calculateVAT('remove')" />
<span>Reduced (5%)</span>
</label>
<label
class="flex cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white p-2 text-sm hover:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50"
>
<input type="radio" name="vat-rate-remove" value="0" class="sr-only" onchange="calculateVAT('remove')" />
<span>Zero (0%)</span>
</label>
<label
class="flex cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white p-2 text-sm hover:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50"
>
<input type="radio" name="vat-rate-remove" value="custom" class="sr-only" onchange="calculateVAT('remove')" />
<span>Custom</span>
</label>
</div>
<div id="custom-rate-container-remove" class="mt-2 hidden">
<label for="custom-rate-remove" class="block text-sm md:text-base font-medium cursor-default">
Custom Rate (%)
</label>
<input
id="custom-rate-remove"
type="number"
min="0"
max="100"
step="0.1"
value="15"
placeholder="Enter VAT rate"
class="mt-1 w-full text-base rounded-md border border-gray-300 py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
oninput="calculateVAT('remove')"
/>
</div>
</div>
<hr class="my-4 border-gray-200" />
<div class="space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<div>
<p class="text-xs sm:text-sm font-medium text-gray-500 cursor-default">
VAT Amount (<span id="vat-rate-display-remove">20</span>%)
</p>
<p id="vat-amount-remove" class="text-lg sm:text-xl md:text-2xl font-bold cursor-default">
£0.00
</p>
</div>
<div>
<p class="text-xs sm:text-sm font-medium text-gray-500 cursor-default">Gross Amount</p>
<p id="gross-amount-remove" class="text-lg sm:text-xl md:text-2xl font-bold cursor-default">
£0.00
</p>
</div>
</div>
<div class="rounded-lg bg-gray-100 p-3 sm:p-4">
<div class="flex items-center justify-between">
<div>
<p class="text-xs sm:text-sm font-medium text-gray-500 cursor-default">Net Amount</p>
<p id="net-amount-remove" class="text-lg sm:text-xl md:text-2xl font-bold cursor-default">
£0.00
</p>
</div>
<button
onclick="copyAmount('remove')"
title="Copy net amount"
class="h-8 w-8 sm:h-10 sm:w-10 rounded-md border border-gray-300 bg-white flex items-center justify-center hover:bg-gray-50"
>
<svg id="copy-icon-remove" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
<svg id="check-icon-remove" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 hidden"><path d="M20 6 9 17l-5-5"/></svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section id="about" class="bg-slate-50 py-8 md:py-12">
<div class="container mx-auto px-4">
<div class="mx-auto max-w-3xl space-y-4 md:space-y-6">
<h2 class="text-xl md:text-2xl font-bold tracking-tighter sm:text-3xl cursor-default">
About VAT
</h2>
<p class="text-sm md:text-base cursor-default">
Value Added Tax (VAT) is a consumption tax placed on a product whenever value is added at each stage of
the supply chain, from production to the point of sale. In the UK, VAT is administered by HM Revenue and
Customs (HMRC).
</p>
<p class="text-sm md:text-base cursor-default">
VAT-registered businesses must charge VAT on their goods or services and can reclaim any VAT they've
paid on business-related goods or services.
</p>
<p class="text-sm md:text-base cursor-default">
If your business has a taxable turnover above the VAT threshold (currently £90,000 as of April 2024), you must register
for VAT with HMRC.
</p>
</div>
</div>
</section>
<section id="rates" class="py-8 md:py-12">
<div class="container mx-auto px-4">
<div class="mx-auto max-w-3xl space-y-4 md:space-y-6">
<h2 class="text-xl md:text-2xl font-bold tracking-tighter sm:text-3xl cursor-default">
UK VAT Rates
</h2>
<div class="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3">
<div class="rounded-lg border bg-white p-3 md:p-4 shadow-sm">
<h3 class="text-base md:text-lg font-semibold cursor-default">Standard Rate: 20%</h3>
<p class="text-xs md:text-sm text-gray-500 mt-1 cursor-default">
Most goods and services in the UK are subject to the standard rate.
</p>
</div>
<div class="rounded-lg border bg-white p-3 md:p-4 shadow-sm">
<h3 class="text-base md:text-lg font-semibold cursor-default">Reduced Rate: 5%</h3>
<p class="text-xs md:text-sm text-gray-500 mt-1 cursor-default">
Some goods and services, such as home energy and children's car seats.
</p>
</div>
<div class="rounded-lg border bg-white p-3 md:p-4 shadow-sm sm:col-span-2 md:col-span-1">
<h3 class="text-base md:text-lg font-semibold cursor-default">Zero Rate: 0%</h3>
<p class="text-xs md:text-sm text-gray-500 mt-1 cursor-default">
Items like most food, books, and children's clothes.
</p>
</div>
</div>
<div class="rounded-lg border bg-white p-3 md:p-4 shadow-sm mt-3 md:mt-4">
<div class="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-8 w-8 text-gray-500 mt-0.5"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
<p class="text-xs md:text-sm text-gray-500 cursor-default">
Some items are exempt from VAT, such as postal services, education, and health services. Unlike
zero-rated items, businesses cannot reclaim the VAT on purchases that relate to exempt supplies.
</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="border-t bg-gray-50">
<div class="container mx-auto px-4 py-6 md:py-8">
<div class="mx-auto max-w-3xl flex flex-col text-center md:flex-row md:items-center md:justify-between md:text-left">
<div class="text-xs md:text-sm text-gray-500 cursor-default">
<p>© <span id="current-year"></span> Moonbolt Ltd. All rights reserved.</p>
</div>
<div class="flex flex-col items-center mt-4 md:flex-row md:mt-0">
<a href="https://vatcalculator.com/privacy-policy/" class="text-xs md:text-sm text-gray-500 hover:underline mt-2 md:mt-0">Privacy Policy</a>
<a href="https://vatcalculator.com/cookie-policy/" class="text-xs md:text-sm text-gray-500 hover:underline mt-2 md:mt-0 md:ml-4">Cookie Policy</a>
<a href="https://vatcalculator.com/contact/" class="text-xs md:text-sm text-gray-500 hover:underline mt-2 md:mt-0 md:ml-4">Contact</a>
</div>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Set current year in footer
document.getElementById('current-year').textContent = new Date().getFullYear();
// Initialize calculations
calculateVAT('add');
calculateVAT('remove');
});
// Switch between tabs
function switchTab(tab) {
const addTab = document.getElementById('tab-add');
const removeTab = document.getElementById('tab-remove');
const addContent = document.getElementById('tab-content-add');
const removeContent = document.getElementById('tab-content-remove');
const addAmountInput = document.getElementById('amount-add');
const removeAmountInput = document.getElementById('amount-remove');
const sourceMode = tab === 'add' ? 'remove' : 'add';
const targetMode = tab;
// --- Synchronization Logic (Copy Input Value) --- START ---
try {
let sourceValue = '';
if (sourceMode === 'add') {
sourceValue = addAmountInput.value;
} else { // sourceMode === 'remove'
sourceValue = removeAmountInput.value;
}
// Basic cleaning (remove commas, etc.) and validation
const cleanSourceValue = sourceValue.replace(/,/g, '');
const numericSourceValue = parseFloat(cleanSourceValue);
if (!isNaN(numericSourceValue)) {
if (targetMode === 'add') {
addAmountInput.value = numericSourceValue.toFixed(2);
calculateVAT('add'); // Trigger calculation on the target tab
} else { // targetMode === 'remove'
removeAmountInput.value = numericSourceValue.toFixed(2);
calculateVAT('remove'); // Trigger calculation on the target tab
}
} else {
// Optionally clear the target input if source is invalid/empty
if (targetMode === 'add') {
addAmountInput.value = '';
calculateVAT('add');
} else {
removeAmountInput.value = '';
calculateVAT('remove');
}
}
} catch (e) {
console.error("Error during tab input synchronization:", e);
}
// --- Synchronization Logic --- END ---
// Update tab buttons visual state
addTab.classList.toggle('bg-white', targetMode === 'add');
addTab.classList.toggle('border-blue-500', targetMode === 'add');
addTab.classList.toggle('border-transparent', targetMode !== 'add');
removeTab.classList.toggle('bg-white', targetMode === 'remove');
removeTab.classList.toggle('border-blue-500', targetMode === 'remove');
removeTab.classList.toggle('border-transparent', targetMode !== 'remove');
// Show/hide tab content
addContent.classList.toggle('hidden', targetMode !== 'add');
addContent.classList.toggle('block', targetMode === 'add');
removeContent.classList.toggle('hidden', targetMode !== 'remove');
removeContent.classList.toggle('block', targetMode === 'remove');
}
// Calculate VAT
function calculateVAT(mode) {
// Show/hide custom input based on selection
const selectedRate = document.querySelector(`input[name="vat-rate-${mode}"]:checked`).value;
const customContainer = document.getElementById(`custom-rate-container-${mode}`);
customContainer.classList.toggle('hidden', selectedRate !== 'custom');
// Get input value
const amountInput = document.getElementById(`amount-${mode}`).value;
if (!amountInput) {
updateResults(mode, 0, 0, 0, '0');
return;
}
// Remove commas and validate
const cleanAmount = amountInput.replace(/,/g, '');
if (isNaN(parseFloat(cleanAmount))) {
updateResults(mode, 0, 0, 0, '0');
return;
}
const value = parseFloat(cleanAmount);
// Get VAT rate
let rateValue;
if (selectedRate === 'custom') {
const customRateValue = document.getElementById(`custom-rate-${mode}`).value;
rateValue = parseFloat(customRateValue) / 100;
document.getElementById(`vat-rate-display-${mode}`).textContent = customRateValue;
} else {
rateValue = parseFloat(selectedRate) / 100;
document.getElementById(`vat-rate-display-${mode}`).textContent = selectedRate;
}
// Calculate amounts
let netAmount, vatAmount, grossAmount;
if (mode === 'add') {
// Adding VAT
netAmount = value;
vatAmount = value * rateValue;
grossAmount = value + vatAmount;
} else {
// Removing VAT
grossAmount = value;
netAmount = value / (1 + rateValue);
vatAmount = value - netAmount;
}
// Update results
updateResults(mode, netAmount, vatAmount, grossAmount, selectedRate);
}
// Update result displays
function updateResults(mode, netAmount, vatAmount, grossAmount, selectedRate) {
document.getElementById(`net-amount-${mode}`).textContent = formatCurrency(netAmount);
document.getElementById(`vat-amount-${mode}`).textContent = formatCurrency(vatAmount);
document.getElementById(`gross-amount-${mode}`).textContent = formatCurrency(grossAmount);
}
// Format currency
function formatCurrency(value) {
return new Intl.NumberFormat('en-GB', {
style: 'currency',
currency: 'GBP',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}).format(value);
}
// Copy amount to clipboard
function copyAmount(mode) {
let amountText, amountValue;
if (mode === 'add') {
// For add VAT, copy the gross amount (result)
amountText = document.getElementById(`gross-amount-${mode}`).textContent;
} else {
// For remove VAT, copy the net amount (result)
amountText = document.getElementById(`net-amount-${mode}`).textContent;
}
amountValue = parseFloat(amountText.replace(/[^0-9.-]+/g, '')).toFixed(2);
navigator.clipboard.writeText(amountValue).then(() => {
// Show check icon
document.getElementById(`copy-icon-${mode}`).classList.add('hidden');
document.getElementById(`check-icon-${mode}`).classList.remove('hidden');
// Reset after 2 seconds
setTimeout(() => {
document.getElementById(`copy-icon-${mode}`).classList.remove('hidden');
document.getElementById(`check-icon-${mode}`).classList.add('hidden');
}, 2000);
});
}
// Input validation for amount fields
document.getElementById('amount-add').addEventListener('input', function(e) {
validateInput(e.target);
});
document.getElementById('amount-remove').addEventListener('input', function(e) {
validateInput(e.target);
});
function validateInput(input) {
const value = input.value;
// Allow numbers, commas, and one decimal point
if (!/^[0-9,]*\.?[0-9]*$/.test(value) && value !== '') {
input.value = input.value.slice(0, -1);
}
}
</script>
</body>
</html>