A walkthrough of two CSS techniques for creating repeating square dot backgrounds. The first approach uses layered linear-gradients with a solid color mask, but lacks true transparency. The second, cleverer approach uses conic-gradient with hard color stops — placing the gradient center at a specific point, making three-quarters transparent and the remainder the dot color — combined with background-size to tile the pattern seamlessly over any background.
Table of contents
Repeating a Small AreaDrawing the Square DotUh Oh — Transparency?Enter Conic GradientsSort: