Unit converter for your website
Length, weight, volume, temperature, area and speed. Free on any site, one snippet, and the factors are the defining ones rather than rounded approximations.
Accent colour
The real widget, running here with your settings.
What it does
Six groups, a value, two menus and a swap button. Each group remembers its own units, so a recipe page that converts cups to millilitres keeps that pair while a reader looks up something else, then comes back to it.
The factors are exact where an exact definition exists. An inch is exactly 25.4 millimetres, a pound is exactly 0.45359237 kilograms, a US gallon is exactly 3.785411784 litres, a mile is exactly 1609.344 metres. Rounded factors are where converter bugs come from, and they compound when a value passes through two of them.
Temperature is handled separately, because Celsius to Fahrenheit has an offset as well as a scale and cannot be done with a single multiply. The widget also refuses anything below absolute zero rather than reporting an impossible temperature.
US and imperial volumes are listed separately, since a US pint is 473 millilitres and an imperial pint is 568. Treating them as the same unit is the single commonest error in recipe conversion.
The full version, with more categories, is the conversion calculator on this site.
How to install it
Copy the code above and paste it into your page where you want the calculator to show. It is ordinary HTML, so it goes wherever HTML goes.
WordPress
In the block editor, add a Custom HTML block and paste the code into it. In the classic editor, switch from Visual to Text first. For a sidebar, use a Custom HTML widget under Appearance, then Widgets. Some managed hosts strip script tags from posts written by non-administrator accounts, in which case paste it while signed in as an administrator.
Wix, Squarespace and Shopify
Wix: add an Embed HTML element and paste the code into the code panel. Squarespace: add a Code block and turn off Display Source. Shopify: paste it into a section or page written in the code editor rather than the rich text field, which removes scripts.
Plain HTML
Paste both lines into the body of the page. The script tag can sit next to the div or at the end of the document, and it only needs to appear once even if the page holds several calculators.
Settings you can change
Every option is a data attribute on the div, so the script itself never needs editing.
| Attribute | What it does | Example |
|---|---|---|
data-theme | Light or dark surface | dark |
data-accent | Colour of the result and link | #b45309 |
data-title | Heading text, or empty for none | Convert units |
data-group | Which group it opens on | volume |
The widget renders inside a shadow root with its own stylesheet, so your site's CSS cannot reach in and break it, and your own rules are equally safe from ours. It caps itself at 400px wide and shrinks to fit anything narrower. To control where it sits, wrap the div in a container of your own.
Terms of use
By using this code you agree:
- The materials are provided as is, without warranty of any kind.
- Not to alter the calculation logic in the script.
- Not to remove the "powered by Calculator Castle" credit link.
- That copyright in the code belongs to calculatorcastle.com.
- Not to remove these terms from the standalone version.
Results are estimates for planning and carry no warranty. Neither you nor your visitors should treat the output as professional advice.
Common questions
Questions about the widget
Is the widget free?
Yes, on any site, including commercial ones. No fee, no account and no usage limit. The one condition is that the "powered by Calculator Castle" link stays visible.
Which units does it cover?
Length, weight, volume, temperature, area and speed, with the common metric and imperial units in each. US and imperial volumes are separate entries, because a US pint and an imperial pint are different sizes.
How accurate are the conversions?
They use the defining values, not rounded ones: the inch is exactly 25.4 mm, the pound exactly 0.45359237 kg, the US gallon exactly 3.785411784 litres. Results are shown to ten significant figures and trimmed of trailing noise.
Does temperature work properly?
Yes. Celsius to Fahrenheit needs an offset as well as a scale, so temperature is converted through its own pair of functions rather than a factor. Anything below absolute zero is refused with an explanation.
Can it open on a particular group?
Yes, with the data-group attribute. A recipe site can open on volume, a fitness site on weight, a travel page on temperature.
How big is it?
14 KB, around 4.6 KB compressed over the wire, loaded with the async attribute so it never blocks your page. No libraries, no fonts, no images and no network requests once loaded.
Will it clash with my site styles?
No. It renders inside a shadow root with its own stylesheet, so your CSS cannot reach into it and its CSS cannot leak out. We test that against a page that sets width, colour and font on every input and button with !important.
Does it track my visitors?
No. It sets no cookies, stores nothing and sends nothing back to us. Everything is worked out in the browser of the person using it, so it needs no cookie banner of its own.