Tailwind CSS 4GradientPattern

Diagonal hatch panel

Fine diagonal hatching with repeating-linear-gradient at 135deg and the same steel color-mix tokens as the other scale snippets. A solid panel sits underneath so transparent stripes read as negative space; two baseline rules finish the block.

135° repeating gradient: 1px stroke, then a short transparent step—the classic technical hatching look, no SVG.

Recipe

Use an angle on repeating-linear-gradient 45deg /135deg flips the diagonal. Exported as SCALE_HATCH_* in lib/repeating-scale-lines.ts. Flip the angle or the stop spacing to tune density.

import { SCALE_HATCH_LIGHT, SCALE_HATCH_DARK } from '@/lib/repeating-scale-lines'

<div className="bg-white dark:bg-steel-950 rounded-lg border …">
  <div className={`min-h-52 ${SCALE_HATCH_LIGHT} ${SCALE_HATCH_DARK}`} />
  <div className="border-t …">
    <div className="h-px w-[calc(100%-6px)] bg-steel-500/35" />
    <div className="h-px w-[calc(100%-2px)] bg-steel-500/35" />
  </div>
</div>