Tailwind CSS 4mask-imageGradient

Scale lines card

Horizontal ruler lines from repeating-linear-gradient, with Tailwind v4 mask-t-from / mask-b-from so lines read strongest next to the card and fade away—same idea as Manu Arora’s single-div mask-b-from-50%, split into two strips above and below.

repeating-linear-gradient

Core idea

Two narrow strips (above and below the card) reuse the same repeating-linear-gradient (SCALE_LINE_ROW_* in lib/repeating-scale-lines.ts). The top strip uses mask-t-from-35% so lines fade toward the top; the bottom strip uses mask-b-from-35% like the post—fade toward the bottom. Line stops use color-mix(… var(--color-steel-*) …) from globals.css @theme steel scale (same idea as the snippet preview grid). The card uses steel-50 /steel-950 surfaces to match the footer.

{/* Light + dark: steel from @theme (see globals.css) */}
<div
  className="
    bg-[repeating-linear-gradient(
      to_bottom,
      color-mix(in_srgb,var(--color-steel-700)_55%,transparent)_0,
      color-mix(in_srgb,var(--color-steel-700)_55%,transparent)_1px,
      transparent_1px,
      transparent_0.4rem
    )]
    dark:bg-[repeating-linear-gradient(
      to_bottom,
      color-mix(in_srgb,var(--color-steel-300)_26%,transparent)_0,
      color-mix(in_srgb,var(--color-steel-300)_26%,transparent)_1px,
      transparent_1px,
      transparent_0.4rem
    )]
    mask-t-from-35%
  "
/>

<div
  className="…same repeating grads… mask-b-from-35%"
/>