.calc-container {
max-width: 800px;
margin: 2rem auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
background: #fff;
padding: 2rem;
}
.calc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
@media (max-width: 768px) {
.calc-grid {
grid-template-columns: 1fr;
}
}
.input-group {
margin-bottom: 1.5rem;
}
.input-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: #2d3748;
}
.input-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid #cbd5e0;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.2s;
}
.input-group input:focus {
outline: none;
border-color: #4299e1;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}
.btn-calc {
background-color: #2b6cb0;
color: white;
border: none;
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
width: 100%;
transition: background-color 0.2s;
margin-top: 1rem;
}
.btn-calc:hover {
background-color: #2c5282;
}
.results-box {
background-color: #f7fafc;
border-radius: 6px;
padding: 1.5rem;
border: 1px solid #edf2f7;
}
.result-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e2e8f0;
}
.result-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.result-label {
color: #718096;
font-size: 0.95rem;
}
.result-value {
font-weight: 700;
color: #2d3748;
font-size: 1.1rem;
}
.big-result {
font-size: 1.5rem;
color: #2b6cb0;
}
.content-section {
max-width: 800px;
margin: 3rem auto;
font-family: inherit;
line-height: 1.6;
color: #2d3748;
}
.content-section h2 {
color: #2b6cb0;
border-bottom: 2px solid #edf2f7;
padding-bottom: 0.5rem;
margin-top: 2rem;
}
.content-section h3 {
color: #4a5568;
margin-top: 1.5rem;
}
.content-section p {
margin-bottom: 1rem;
}
.content-section ul {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.error-msg {
color: #c53030;
font-size: 0.9rem;
margin-top: 0.5rem;
display: none;
}
Concrete Slab & Bag Calculator
Estimated Materials
Total Volume:
0.00 Cubic Yards
Volume in Feet:
0.00 Cubic Feet
80lb Bags Needed:
0
60lb Bags Needed:
0
Est. Cost (80lb Bags):
$0.00
*Includes 10% waste safety margin
How to Calculate Concrete for a Slab
Planning a DIY patio, driveway, or shed foundation? Calculating the exact amount of concrete required is the most critical step to ensure you don't run out mid-pour or overspend on materials. This Concrete Slab Calculator helps you determine exactly how many premixed bags or cubic yards of concrete you need for your project.
The Concrete Calculation Formula
To calculate the volume of concrete needed for a rectangular slab, you need to determine the volume in cubic feet and then convert it to cubic yards, which is the standard unit for ordering ready-mix concrete.
The math behind the tool:
- Step 1: Convert thickness from inches to feet (Divide inches by 12).
- Step 2: Multiply Length × Width × Thickness (in feet) = Cubic Feet.
- Step 3: Divide Cubic Feet by 27 = Cubic Yards.
Bagged Concrete Yields
If you are mixing concrete yourself using pre-packaged bags from a hardware store, here are the standard yields used in our calculator:
- 80lb Bag: Yields approximately 0.60 cubic feet.
- 60lb Bag: Yields approximately 0.45 cubic feet.
Note: It is industry standard to add a 5-10% safety margin (waste factor) to account for spillage, uneven subgrades, and variations in slab depth. Our calculator automatically adds a 10% buffer to the bag count to ensure you have enough material.
Common Slab Thicknesses
Not sure how thick your slab should be? Here are general guidelines:
- 4 Inches: Standard for walkways, patios, and shed floors.
- 5-6 Inches: Recommended for driveways and garages holding passenger vehicles.
- 6+ Inches: Heavy equipment or RV pads.
Tips for a Successful Pour
Before you buy your materials based on the concrete cost estimate, ensure your subgrade is well-compacted. A loose subgrade can settle, causing your slab to crack. Always use a gravel base for drainage, and consider using rebar or wire mesh for added structural reinforcement in driveways or large patios.
function calculateConcrete() {
// Get input values
var length = parseFloat(document.getElementById("slabLength").value);
var width = parseFloat(document.getElementById("slabWidth").value);
var thickInches = parseFloat(document.getElementById("slabThickness").value);
var price = parseFloat(document.getElementById("pricePerBag").value);
var errorBox = document.getElementById("errorMsg");
// Validate inputs
if (isNaN(length) || length <= 0 || isNaN(width) || width <= 0 || isNaN(thickInches) || thickInches 0) {
totalCost = bags80Needed * price;
}
// Output Results
document.getElementById("resVolumeYards").innerText = cubicYards.toFixed(2) + " Cubic Yards";
document.getElementById("resVolumeFeet").innerText = cubicFeet.toFixed(2) + " Cubic Feet";
document.getElementById("resBags80").innerText = bags80Needed;
document.getElementById("resBags60").innerText = bags60Needed;
if (totalCost > 0) {
document.getElementById("resTotalCost").innerText = "$" + totalCost.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
} else {
document.getElementById("resTotalCost").innerText = "$0.00";
}
}