Concrete calculator for your website
Free to put on any site. Slabs, columns and rings, answered in cubic yards, cubic metres and whole bags, with a waste allowance built in. Pick a colour and theme, copy the snippet, done.
Accent colour
The real widget, running here with your settings.
What it does
Three shapes cover nearly every domestic pour. A slab takes a length, a width and a thickness, which also handles walls and square footings. A column takes a diameter and a depth, which handles post holes and round footings. A tube takes an outer and an inner diameter, which handles rings and circular slabs with a void in the middle.
Each dimension carries its own unit, so a slab can be measured in feet and its thickness in inches without anyone converting anything. Everything is worked out in cubic metres internally and reported in cubic yards, cubic metres and cubic feet, because ready-mixed concrete is ordered by the yard while bags are labelled in pounds or kilograms.
Two things it does that most do not
A waste allowance. The volume of the hole is not the amount of concrete to buy. Some is lost to spillage, some to a subgrade that is not perfectly flat, some to over-excavation, and some never leaves the barrow. Ten percent is the default and the figure before the allowance is shown alongside, so nothing is hidden.
Whole bags. A result of 8.66 bags means buying nine. Rounding up is what the number is for, and running out of concrete halfway through a pour leaves a cold joint that has to be dealt with rather than a shopping trip.
A drawing of the shape sits above the inputs and follows the dimensions as they change, so a thin slab looks thin and a narrow ring looks narrow. It is a small thing that catches the commonest mistake in this kind of calculator, which is entering inches where feet were meant.
The full version, with rebar and post-hole options and the working shown step by step, is the concrete 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 total and link | #b45309 |
data-title | Heading text, or empty for none | How much concrete? |
data-shape | Which shape it opens on | column |
data-units | Whether the unit menus start imperial or metric | metric |
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 440px 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 shapes does it handle?
Three, switched with the tabs at the top. A slab covers slabs, square footings and walls. A column covers holes, columns and round footings. A tube covers circular slabs and rings, where a hole is subtracted from the middle. Each keeps its own dimensions, so switching tabs does not wipe what has been typed.
Why does it add a waste allowance?
Because the volume of the hole is never the amount of concrete you need. Some is lost to spillage, to uneven subgrade, to over-excavation and to what stays in the barrow. Ten percent is a common allowance and it is the default here, adjustable from zero upwards. It is the single most useful thing this calculator does that most concrete calculators do not.
Why are bag counts rounded up?
Because nobody sells two thirds of a bag. A result of 8.66 bags means buying 9. Showing the exact fraction and leaving the arithmetic to the reader is how people end up one bag short with a slab half poured.
What density does it assume?
Mixed concrete at 2,130 kg per cubic metre, which is the standard trade figure and works out to 132.97 pounds per cubic foot. The pounds are derived from the same number as the kilograms, so the two weights always agree with each other.
Can visitors work in metric?
Yes. Every dimension has its own unit menu covering feet, inches, yards, metres and centimetres, so a slab can be ten feet long and four inches thick without any conversion. The data-units attribute decides which system the menus start in.
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 and font on every input with !important, which breaks most embedded widgets.
How big is it?
19 KB, around 6.4 KB compressed over the wire, loaded with the async attribute so it never blocks your page. No libraries, no fonts and no images.
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.
Quantities are estimates. Local building codes, structural requirements and site conditions all sit outside what any calculator can see, so have a qualified trade check anything that will be built. See all embeddable calculators.