← All examples

Baseline grid overlay

Draws horizontal lines every 24 px to help check vertical rhythm and text baseline alignment.

Code to copy

html::before {
  content: "";
  position: fixed; inset: 0; z-index: 99998;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 23px, rgba(0,100,255,0.18) 23px 24px
  );
}

How to use this example

1. Copy the code with the button above.
2. Install JustZix (2 minutes) and open the extension on the target page.
3. Add a new rule matching that page.
4. Paste the code into the rule's CSS panel and save — the effect appears instantly.