From Storybook

css-grid-bg.css

:root {
  --grid-size: 10px;
  --cell-amount: 10;
  --grid-line-opacity: .4;
  --grid-offset-x: 20px;
  --grid-offset-y: 20px;
}


.with-grid-lines {
  background-size: calc(var(--grid-size) * var(--cell-amount)) calc(var(--grid-size) * var(--cell-amount)),
    calc(var(--grid-size) * var(--cell-amount)) calc(var(--grid-size) * var(--cell-amount)),
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size) !important;
  background-position: var(--grid-offset-x) var(--grid-offset-y),
    var(--grid-offset-x) var(--grid-offset-y),
    var(--grid-offset-x) var(--grid-offset-y),
    var(--grid-offset-x) var(--grid-offset-y) !important;
  background-blend-mode: difference !important;
  background-image: linear-gradient(rgba(130, 130, 130, var(--grid-line-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 130, 130, var(--grid-line-opacity)) 1px, transparent 1px),
    linear-gradient(rgba(130, 130, 130, calc(var(--grid-line-opacity) / 2)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 130, 130, calc(var(--grid-line-opacity) / 2)) 1px, transparent 1px) !important;
}