Question 108454 in CSS Question posted in
Some basic documentation can be found here.

How to make dashed line grid paper like background in CSS

How do I create dashed line grid paper like pattern in CSS?
My current code draws grid, but my line is not dashed.

background-size: 100px 100px;
background-image: linear-gradient(to right,#f0f0f0 1px,transparent 1px),linear-gradient(to bottom,#f0f0f0 1px,transparent 1px);
background-position: top center;

I’d like to create background like this:
https://www.pixtastock.com/illustration/53928114

Tags:

2

Answers


  1. 0

    You can use background-image with an encoded SVG inside a URL for this. The SVG URL encoder is pretty handy for this. You can develop an SVG then use the stroke-dasharray to make it dashed. Example code below

    body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0 -0 10 10'%3E%3Cpath d='M 0 1 L 10 1 M 1 0 L 1 10' stroke='%23404040' stroke-dasharray='1' stroke-width='0.1' /%3E%3C/svg%3E"); 
  background-size: 30px 30px;
}
    Login or Signup to reply.
  2. 0

    For the sake of completeness, a CSS only solution without using a SVG.
    Just tweak the CSS variables for your need and you are done.

    Here’s the fiddle: https://jsfiddle.net/0nt7v9bj/

    .dashed-grid-paper {

    --grid-size: 30px;
    --grid-strength: 1px;
    --grid-dash: 5px;
    --grid-gap: 10px;
    --grid-color: #ddd;
    --paper-color: #fff;

  background-color: var(--paper-color);
  background-size: var(--grid-gap) var(--grid-gap), var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(to bottom, transparent var(--grid-dash), var(--paper-color) var(--grid-dash)), 
    linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)),
    linear-gradient(to right, transparent var(--grid-dash), var(--paper-color) var(--grid-dash)),
    linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));
}
    <body class="dashed-grid-paper">
<p style="margin: 40px">How to make a dashed line grid paper<br>like background using CSS only.</p>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search