.concrete-calculator-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
.cc-calculator-box {
background: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
margin-bottom: 40px;
}
.cc-title {
text-align: center;
color: #2c3e50;
margin-bottom: 25px;
font-size: 24px;
font-weight: 700;
}
.cc-form-group {
margin-bottom: 20px;
}
.cc-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #444;
}
.cc-input-row {
display: flex;
gap: 15px;
}
.cc-input-container {
flex: 1;
}
.cc-input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
box-sizing: border-box;
}
.cc-input:focus {
border-color: #3498db;
outline: none;
}
.cc-btn {
width: 100%;
padding: 15px;
background-color: #e67e22;
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
margin-top: 10px;
}
.cc-btn:hover {
background-color: #d35400;
}
.cc-results {
margin-top: 30px;
padding: 20px;
background-color: #f1f8ff;
border-radius: 6px;
border-left: 5px solid #3498db;
display: none;
}
.cc-result-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #dae1e7;
}
.cc-result-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.cc-result-label {
color: #555;
font-weight: 500;
}
.cc-result-value {
font-weight: 800;
color: #2c3e50;
}
.cc-content h2 {
color: #2c3e50;
margin-top: 30px;
border-bottom: 2px solid #e67e22;
padding-bottom: 10px;
display: inline-block;
}
.cc-content p {
line-height: 1.6;
color: #555;
margin-bottom: 15px;
}
.cc-content ul {
margin-bottom: 20px;
padding-left: 20px;
}
.cc-content li {
margin-bottom: 8px;
line-height: 1.6;
}
@media (max-width: 600px) {
.cc-input-row {
flex-direction: column;
gap: 15px;
}
}
function calculateConcrete() {
// Get input values
var lengthInput = document.getElementById('slabLength').value;
var widthInput = document.getElementById('slabWidth').value;
var thickInput = document.getElementById('slabThickness').value;
var wasteInput = document.getElementById('wasteMargin').value;
var lengthUnit = document.getElementById('lengthUnit').value;
var widthUnit = document.getElementById('widthUnit').value;
// Validation
if (lengthInput === "" || widthInput === "" || thickInput === "") {
alert("Please fill in all dimensions (Length, Width, and Thickness).");
return;
}
var length = parseFloat(lengthInput);
var width = parseFloat(widthInput);
var thickness = parseFloat(thickInput);
var waste = parseFloat(wasteInput) || 0;
if (isNaN(length) || isNaN(width) || isNaN(thickness)) {
return;
}
// Convert Length to Feet
if (lengthUnit === 'inches') {
length = length / 12;
} else if (lengthUnit === 'yards') {
length = length * 3;
}
// Convert Width to Feet
if (widthUnit === 'inches') {
width = width / 12;
} else if (widthUnit === 'yards') {
width = width * 3;
}
// Convert Thickness (always input as inches) to Feet
var thickFeet = thickness / 12;
// Calculate Volume in Cubic Feet
var cubicFeet = length * width * thickFeet;
// Add Waste Margin
var wasteMultiplier = 1 + (waste / 100);
var totalCubicFeet = cubicFeet * wasteMultiplier;
// Calculate Volume in Cubic Yards
var totalCubicYards = totalCubicFeet / 27;
// Calculate Bags
// Standard yield:
// 80lb bag approx 0.60 cubic feet
// 60lb bag approx 0.45 cubic feet
var bags80 = Math.ceil(totalCubicFeet / 0.60);
var bags60 = Math.ceil(totalCubicFeet / 0.45);
// Display Results
document.getElementById('resCuYards').innerText = totalCubicYards.toFixed(2);
document.getElementById('resCuFeet').innerText = totalCubicFeet.toFixed(2);
document.getElementById('resBags80').innerText = bags80;
document.getElementById('resBags60').innerText = bags60;
// Show results div
document.getElementById('resultsArea').style.display = 'block';
}
Concrete Slab Calculator
Feet
Inches
Yards
Feet
Inches
Yards
Recommended: 5-10% to account for uneven subgrade and spillage.
Total Volume:
0.00 Cubic Yards
Total Volume (Cu. Ft):
0.00 Cubic Feet
80lb Bags of Premix:
0 Bags
60lb Bags of Premix:
0 Bags
How to Calculate Concrete for Slabs
Calculating the correct amount of concrete is critical for any construction project, whether you are pouring a patio, a driveway, or a foundation footing. Ordering too little results in "cold joints" which weaken the structure, while ordering too much wastes money.
The basic formula for concrete volume is Length × Width × Thickness. However, because concrete is sold by the Cubic Yard (or "yard"), all measurements must be converted to a consistent unit before calculation.
The Math Behind the Calculation
To determine the volume manually:
- Convert dimensions to feet: If your slab is 6 inches thick, divide by 12 to get 0.5 feet.
- Multiply to find Cubic Feet: Length (ft) × Width (ft) × Thickness (ft) = Total Cubic Feet.
- Convert to Cubic Yards: Divide the Total Cubic Feet by 27 (since there are 27 cubic feet in one cubic yard).
Bagged Concrete vs. Ready-Mix Truck
Deciding between buying bags or ordering a truck depends on the volume needed:
- Under 1 Cubic Yard: It is usually more cost-effective and manageable to mix bagged concrete (60lb or 80lb bags) yourself.
- 1 to 2 Cubic Yards: This is the "gray area" where renting a tow-behind mixer might be efficient, or ordering a short-load truck.
- Over 2 Cubic Yards: Ordering a Ready-Mix truck is standard. Hand-mixing this volume is labor-intensive and risks the concrete setting unevenly.
Standard Thickness Guide
- 4 Inches: Standard for walkways, patios, and residential garage floors.
- 5-6 Inches: Recommended for driveways that hold heavier vehicles or RVs.
- 8+ Inches: Heavy-duty industrial floors or commercial foundations.
Why Add a Waste Margin?
Professional contractors always add a safety margin, typically 5% to 10%. This accounts for:
- Uneven subgrade (ground) depth.
- Spillage during the pour.
- Concrete remaining inside the mixer or wheelbarrow.
- Form bowing (when the weight of the concrete pushes the wooden forms outward).