Having Striped Dashed lines as background

Question

Is it possible to have this striped and dashed background with CSS only?

Background is created by Chrome when inspecting flex elements, and I find it really cool.

Answer 1

You can use repeating-linear-gradient like this:

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100w;
  background: repeating-linear-gradient(
    45deg,
    tomato 0px,
    tomato 2px,
    transparent 2px,
    transparent 9px
  );
}
div {
  height: 100vh;
  width: 100vw;
  background: repeating-linear-gradient(
    -45deg,
    white 0px,
    white 4px,
    transparent 4px,
    transparent 12px
  );
}

<div></div>

Tweak with the code

These few lines do produce a somewhat similar pattern, but it won't look good on a low DPI screen. So, in my opinion, it's better to use an SVG pattern instead of pure CSS.