Free website tool
Embed a yard material calculator
Add a compact cubic-yard and tons estimator to a landscaping article, supplier resource page, or DIY guide. Configure the starting values, copy two HTML tags, and keep the calculator on your own page.
What it includes
A small calculator with explicit assumptions
How to add the calculator to a website
Use the configurator above to choose a useful starting material, project area, and depth. Copy the generated code and paste it into the HTML where the calculator should appear. The module script registers a custom HTML element; the second tag places that element in the page. Load the script once even when a page contains more than one calculator.
The component uses Shadow DOM, so typography, form controls, and result styling stay readable even when the host website has aggressive global CSS. Its width follows the parent container up to 420 pixels. That makes it suitable for a blog sidebar, a narrow resource column, or an inline section in a longer guide. At very narrow widths the area and depth fields stack instead of shrinking below a usable size.
Embed API
Widget attributes
| Attribute | Purpose | Default |
|---|---|---|
material | Starting material shown in the selector | Pea gravel |
area | Starting project area in square feet | 500 |
depth | Starting material depth in inches | 3 |
Calculation method and accuracy
The widget calculates cubic yards as square feet multiplied by depth in inches, divided by 324. It then multiplies that volume by the selected material's typical minimum and maximum tons per cubic yard. Showing a range is intentional: bulk landscape materials do not have one universal density, and a single precise-looking weight would imply more certainty than the source data supports.
Use the result as an early planning estimate, not a final quote. The widget does not add waste, model irregular shapes, compare bags with bulk delivery, or account for compaction. For a full project worksheet, direct readers to the matching calculator or the cubic yard coverage chart, where the assumptions, downloadable data, and material-specific tools are documented.
FAQ
Calculator widget FAQ
Is the yard material calculator widget free to embed?
Yes. The widget and its underlying coverage data are available under the CC BY 4.0 license. Keep the source attribution in place when you embed or republish it.
Which materials does the widget support?
The current version supports pea gravel, crushed stone, river rock, topsoil, compost, mulch, sand, and fill dirt. Each material includes a typical tons-per-cubic-yard planning range.
Can visitors change the values after the widget loads?
Yes. The embed attributes set the starting material, square footage, and depth. Visitors can then change all three values inside the calculator without leaving the host page.
Does the widget use cookies or analytics?
No. Version 1.2.0 performs calculations in the visitor's browser and does not set cookies, load ads, or send form values to Yard Material Tools. The only outbound navigation occurs when a visitor opens the source link.
Are the calculated tons suitable for a final order?
No. They are planning estimates based on typical density ranges. Moisture, compaction, gradation, supplier measurements, and local material names vary, so confirm density and order quantities with the supplier.