Back to snippets
Tailwind CSS 4mask-imageGradient

Scale lines rails

Same recipe as the scale-lines card—repeating-linear-gradient plus Tailwind v4 masks—but vertical rules on left and right rails using to_right, mask-l-from, and mask-r-from. Gradients are shared from lib/repeating-scale-lines.ts.

Side rails

to_right · mask-l-from · mask-r-from

Variation

Swap to_bottom for to_right, put the background on narrow columns, and pair mask-l-from-35% / mask-r-from-35% so the scale reads strongest against the panel edges.

import {
  SCALE_LINE_COL_LIGHT,
  SCALE_LINE_COL_DARK,
} from '@/lib/repeating-scale-lines'

const rails = `${SCALE_LINE_COL_LIGHT} ${SCALE_LINE_COL_DARK}`

<div className={`w-12 shrink-0 ${rails} mask-l-from-35%`} />
<div className={`w-12 shrink-0 ${rails} mask-r-from-35%`} />