Baseline Grid Generator

Generate baseline grid overlays for typography alignment.

Grid Size (px)

Line Color

Opacity (15%)

Method

Show Grid

Heading on Grid

This paragraph text sits on the baseline grid with a 24px rhythm. Each line of text aligns to the grid lines, creating a harmonious vertical rhythm throughout the page.

Smaller text also respects the same grid, keeping everything vertically aligned and consistent.

CSS Output (Gradient):

background-image: repeating-linear-gradient(
  to bottom,
  transparent,
  transparent 23px,
  rgba(59,130,246,0.15) 23px,
  rgba(59,130,246,0.15) 24px
);
background-size: 100% 24px;