.concrete-calculator-wrapper {
max-width: 800px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #333;
line-height: 1.6;
}
.calc-container {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 30px;
margin-bottom: 40px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.calc-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.calc-group {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
}
.calc-group label {
font-weight: 600;
margin-bottom: 8px;
color: #495057;
font-size: 14px;
}
.calc-group input, .calc-group select {
padding: 12px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.15s ease-in-out;
}
.calc-group input:focus {
outline: none;
border-color: #4dabf7;
box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
}
.calc-btn {
background-color: #228be6;
color: white;
border: none;
padding: 15px 30px;
font-size: 18px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
width: 100%;
transition: background-color 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.calc-btn:hover {
background-color: #1c7ed6;
}
.calc-results {
margin-top: 30px;
background: #fff;
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 20px;
display: none;
}
.result-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.result-item {
text-align: center;
padding: 15px;
background: #f1f3f5;
border-radius: 6px;
}
.result-label {
font-size: 13px;
color: #868e96;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
}
.result-value {
font-size: 24px;
font-weight: 700;
color: #212529;
}
.result-primary {
background-color: #e7f5ff;
border: 1px solid #a5d8ff;
}
.result-primary .result-value {
color: #1971c2;
}
.calc-content h2 {
margin-top: 30px;
font-size: 24px;
color: #212529;
border-bottom: 2px solid #228be6;
padding-bottom: 10px;
display: inline-block;
}
.calc-content p {
margin-bottom: 15px;
}
.calc-content ul {
margin-bottom: 20px;
padding-left: 20px;
}
.calc-content li {
margin-bottom: 8px;
}
.error-msg {
color: #fa5252;
font-weight: 600;
margin-top: 10px;
display: none;
text-align: center;
}
How to Calculate Concrete for Slabs
Whether you are pouring a patio, a driveway, or a shed foundation, calculating the correct amount of concrete is crucial to the success of your project. Ordering too little can result in weak "cold joints," while ordering too much is a waste of money.
The basic formula for concrete volume involves multiplying the length by the width by the depth (thickness) of the slab. Since concrete is typically sold by the Cubic Yard, you must convert your measurements to a unified unit before calculating.
The Concrete Formula
To determine how many cubic yards you need, follow these steps:
- Step 1: Measure the Length and Width in feet.
- Step 2: Measure the Thickness in inches and convert it to feet (divide inches by 12).
- Step 3: Multiply Length × Width × Thickness (in feet) to get Cubic Feet.
- Step 4: Divide the Cubic Feet by 27 to get Cubic Yards (since there are 27 cubic feet in 1 cubic yard).
Premix Bags vs. Ready-Mix Truck
Once you have your calculated volume, you need to decide how to buy the concrete:
Bagged Concrete (Premix): Best for small projects under 1 cubic yard (approx. 45-60 bags). It requires manual mixing but allows you to work at your own pace.
Standard Yields: An 80lb bag yields approximately 0.60 cubic feet, while a 60lb bag yields about 0.45 cubic feet.
Ready-Mix Truck: Best for large projects (over 1-2 cubic yards). The truck arrives with the concrete already mixed. Note that many suppliers have a minimum order quantity (often 1 yard) and charge "short load" fees for small amounts.
Why Include a Waste Factor?
Our calculator allows you to add a waste margin (typically 5-10%). This is highly recommended because:
- Spillage occurs during transport and pouring.
- Uneven subgrades (the ground beneath the concrete) may require more material to fill low spots.
- Forms may bow slightly under the weight of the wet concrete, increasing the volume.
It is always cheaper to buy a few extra bags or order slightly more from the truck than to pause a project to fetch more material.
function calculateConcrete() {
// 1. Get input values
var length = parseFloat(document.getElementById('slabLength').value);
var width = parseFloat(document.getElementById('slabWidth').value);
var thicknessInches = parseFloat(document.getElementById('slabThickness').value);
var wastePercent = parseFloat(document.getElementById('wasteFactor').value);
var errorDiv = document.getElementById('errorDisplay');
var resultsDiv = document.getElementById('resultsArea');
// 2. Validate inputs
if (isNaN(length) || length <= 0 ||
isNaN(width) || width <= 0 ||
isNaN(thicknessInches) || thicknessInches <= 0) {
errorDiv.style.display = "block";
resultsDiv.style.display = "none";
return;
}
// Hide error if previously shown
errorDiv.style.display = "none";
// 3. Perform Calculations
// Convert thickness to feet
var thicknessFeet = thicknessInches / 12;
// Calculate Volume in Cubic Feet
var cubicFeet = length * width * thicknessFeet;
// Apply Waste Factor
// If waste is 5%, we multiply by 1.05
var wasteMultiplier = 1 + (wastePercent / 100);
var totalCubicFeet = cubicFeet * wasteMultiplier;
// Calculate Cubic Yards (27 cubic feet per yard)
var cubicYards = totalCubicFeet / 27;
// Calculate Bags needed
// Standard yield: 80lb bag = 0.6 cu ft
// Standard yield: 60lb bag = 0.45 cu ft
var bags80 = Math.ceil(totalCubicFeet / 0.60);
var bags60 = Math.ceil(totalCubicFeet / 0.45);
// 4. Update UI
document.getElementById('resYards').innerText = cubicYards.toFixed(2);
document.getElementById('resFeet').innerText = totalCubicFeet.toFixed(2);
document.getElementById('resBags80').innerText = bags80;
document.getElementById('resBags60').innerText = bags60;
// Show results
resultsDiv.style.display = "block";
}