How to use the backsplash visualizer
Start with the pattern at the top. Each button shows a small sample in your current colors, so you can compare subway, stacked, vertical, herringbone, basketweave and hexagon side by side.
Then work through the settings below the drawing:
- Tile size. Each pattern lists the sizes it is usually sold in. A 3 x 6 subway tile, a 2 x 10 herringbone tile and a 2 inch hexagon are the defaults.
- Tile color and grout color. Tap a swatch, or use the plus button to pick any color you like.
- Grout joint. Wall tile is usually set with a 1/16 or 1/8 inch joint. Wider joints make the grout color count for more.
- Backsplash size. Enter the length of the counter run and the height from the countertop to the underside of the upper cabinets. Tap the unit toggle for centimeters.
- Above the backsplash. Show upper cabinets, or a window over the sink with cabinets on each side.
The drawing updates as you go, to scale, with outlets placed along the counter. The result panel shows how many tiles to buy, the area with waste, how many tiles go in whole and how many get cut, and the size of the cuts at the ends and the top. Save the drawing as an image to show your tile store or installer.
The rules behind the count
Order extra for cuts. Tile is sold by the square foot or by the box, and some of it ends up in offcuts and breakage. Straight layouts like subway and stacked need about 10% extra. Herringbone, basketweave and hexagon need about 15%, because more tiles are cut and fewer offcuts can be reused.
Start with a full row on the counter. The bottom row is the one you see most, so it should be whole tiles. Any cut goes at the top, under the cabinets, where it is in shadow.
Center the layout. The visualizer centers the columns on the counter so the cuts at both ends match. It picks whichever option, a tile or a grout joint on the center line, gives the bigger end pieces.
Avoid slivers. A cut narrower than a third of a tile, or under 2 inches, is hard to cut cleanly and looks like a mistake. The result flags these. If the top row comes out thin, split the cut between the top and bottom rows, or choose a tile that divides the height more evenly.
Plan for outlets. Countertop outlets have to be spaced so no point along the counter is more than 2 feet from one. Every tile that touches an outlet needs a notch, and the result counts them.
Assumptions
The backsplash is treated as one flat rectangle, the full length of the counter. Outlet boxes, a range hood and side walls are not subtracted, which keeps the order on the safe side. The window option is for the picture only, so the count still covers the full strip.
Tile sizes are nominal. Real tiles often run a little smaller than their label. Hexagon sizes are measured across the flat sides. Mosaics sold on mesh sheets come out close to the same count by area, but you buy them by the sheet.
On a small screen a 1/16 inch joint would be thinner than a pixel, so the drawing never shows a grout line thinner than a set minimum. The counts use the real joint width.
Worked example
Say the counter run is 8 feet long and the gap up to the cabinets is 18 inches. You want 3 x 6 inch white subway tile with 1/16 inch gray grout.
- Area: 96 x 18 inches is 12 square feet.
- Order: 12 square feet plus 10% is 13.2 square feet, or about 103 tiles.
- Layout: 6 rows. The bottom 5 rows are whole tiles, and the top row is cut to about 2 3/4 inches.
- Ends: centering the columns leaves about 5 1/2 inch pieces at each end of the rows, comfortably more than a third of a tile.
- Cuts: 72 tiles go in whole and 27 are cut, including 8 tiles notched around the two outlets.
Switch the same wall to 2 x 10 herringbone and the area stays the same, but the order rises to 13.8 square feet because of the 15% allowance. That works out to about 96 of the longer tiles.
Pin it for later
Backsplash Visualizer FAQ
How many tiles do I need for a backsplash?
Multiply the length of the counter by the backsplash height to get the area, then add 10% for a subway or stacked layout and 15% for herringbone, basketweave or hexagon. An 8 foot counter with an 18 inch backsplash is 12 square feet, so plan on about 13.2 square feet, or roughly 103 tiles in 3 x 6 subway.
What color grout should I use with white subway tile?
A white or warm white grout blends in and makes the wall read as one smooth surface. A light or mid gray shows each tile and hides kitchen splashes better. Charcoal or black grout gives the strongest graphic look but makes any uneven joints obvious.
How high should a kitchen backsplash be?
The standard gap between the countertop and the upper cabinets is 18 inches, and most backsplashes fill it. Without upper cabinets, many people stop at 18 to 24 inches or tile to the ceiling behind a range or open shelves.
Is herringbone harder to install than subway tile?
Yes. Every piece at the counter, the cabinets and the ends is an angled cut, and the pattern has to be laid out from a center line so the zigzag stays straight. Expect more cutting time and order about 15% extra instead of 10%.
What size subway tile looks best on a backsplash?
The classic 3 x 6 inch tile fits almost any kitchen. Longer formats such as 2 x 8, 3 x 12 and 4 x 12 have fewer grout lines and look more modern. Small tiles suit short runs, while long tiles look best on a wide wall where you see several full tiles in a row.