116

How to make a grid (like graph paper grid) with just CSS? I just want to make a virtual grid paper only using CSS.

1

8 Answers 8

247

To make grids you can use CSS gradients, which work on all modern browsers (see Caniuse).

Use linear gradients to draw a lined grid:

body {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

Use a radial gradient to draw a grid with dotted corners:

body {
  background-size: 40px 40px;
  background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}

6
  • 2
    Clear and smart, nice!
    – 1_bug
    Feb 28, 2017 at 12:44
  • 1
    Thank you! Any idea to make a dashed/dotted grid?
    – Julius Š.
    Apr 27, 2017 at 9:04
  • Easy Peasy. Good to have easier version.
    – user285594
    Sep 7, 2017 at 12:34
  • 2
    This is great for local development, I'm just using it to make sure my CSS implementation is sticking to the design grid, so I'm not concerned about cross-browser support. I made a slight modification for my use case, by using percentages instead of px I get a grid of 16 columns regardless of the viewport width: background-size: 6.25% 16pt; Mar 12, 2019 at 22:39
  • 3
    If somebody's code still not working, then try to add: background-repeat: repeat; Sep 29, 2020 at 17:12
53

body {
    background:
        linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px), 
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(-90deg, #aaa 1px, transparent 1px),
        linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
        linear-gradient(#aaa 1px, transparent 1px),
        #f2f2f2;
    background-size:
        4px 4px,
        4px 4px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px,
        80px 80px;
}

5
  • 6
    Hi and welcome to SO ! Please try to add a few lines to explain why you think your answer responds best to the original question, thanks.
    – m4rtin
    Sep 7, 2014 at 10:50
  • 2
    The other answers are good, but this is the kind of grid many people will have in mind when searching for "graph paper", thanks.
    – Lunster
    Apr 11, 2021 at 13:36
  • I like this idea, but can you post a simple version that shows just the basic graph?
    – jdmayfield
    Oct 25, 2021 at 0:27
  • This should be the accepted answer.
    – jscul
    Apr 21, 2022 at 19:44
  • this is awesome
    – ether_joe
    May 24, 2022 at 1:21
22

Since you mentioned lined paper:

div {
  background-color: #fff;
  background-size: 100% 1.2em;
  background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em);
  background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em);
  background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee .05em, transparent .05em);
  background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(#eee .05em, transparent .05em);
  background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .05em, transparent .05em);
  -pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
  behavior: url(/PIE.htc);
}
<div style="width: 200px; height: 200px"></div>

The last line: behavior: url(/PIE.htc); is a plugin called css3pie that adds support for ie 6-9 I believe. In fact this example is taken from their website where there are plenty more interesting examples: http://css3pie.com/demos/gradient-patterns/

18

One conic-gradient() can do the job

html {
  background:
    conic-gradient(from 90deg at 1px 1px,#0000 90deg,blue 0) 
    0 0/50px 50px;
}

Another concept:

html {
  --s: 100px; /* control the size */
  
  --_g: #0000 90deg,#366 0;
  background: 
    conic-gradient(from 90deg at 2px 2px,var(--_g))
     0 0/var(--s) var(--s),
    conic-gradient(from 90deg at 1px 1px,var(--_g))
     0 0/calc(var(--s)/5) calc(var(--s)/5);
}

7

What you can do is grab a grid image like this one:

Grid PNG

Then tile it with CSS:

#background {
  background: url('path/to/grid-image.png');
}

So yeah, it's not only CSS – you also need the image, but the solution should be quite clean. Here it is in action:

#background {
    width: 200px;
    height: 160px;
    background: url('https://i.stack.imgur.com/GySvQ.png');
}
<div id="background"></div>

3
  • 1
    More than acceptable method - I still use this as it's simple. Just make sure the PNG is as compressed as can be and all is good. For example, the above answer uses a PNG file which is 1kb. If you run the file through tinypng.com, it reduces it nicely to 109b - an 89% saving.
    – TheCarver
    Feb 16, 2015 at 4:28
  • 7
    Technically you could make this css only using: background: url('data:image/png;base64,[yourBase64StringHere]'); Replacing [yourBase64StringHere] with a base64 encoded string of that cross image.
    – ADJenks
    Feb 6, 2017 at 21:41
  • If you really want to use an image, please use SVG. Jun 3 at 8:54
5

Done with svg and base64. Scale and colors can be modified by changing width, height and color parameters in the svg. Here are two examples with a blue and white square grid of different sizes.

.blue-square-grid-20px {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='100%' height='100%' fill='%230000ff' /%3E%3Crect x='50%' width='2' height='100%' fill='%231ff' /%3E%3Crect y='50%' width='100%' height='2' fill='%231ff' /%3E%3C/svg%3E%0A");
}

.white-square-grid-40px {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='%23ddd' /%3E%3Crect y='50%' width='100%' height='1' fill='%23ddd' /%3E%3C/svg%3E%0A");
}

.example-box {
  width: 100vw;
  height: 100px;
}
<p>blue grid, 20px grid size and 2px line width</p>
<div class="blue-square-grid-20px example-box"></div>
<p>white grid, 40px grid size and 1px line width</p>
<div class="white-square-grid-40px example-box"></div>

3
  • This isn't scalable, gradients or SVG is preferred Jun 2 at 9:35
  • But it's a PNG, and a PNG is a bitmap image. Jun 3 at 8:31
  • 1
    @Gugalcrom123 Good point. It's now changed to svg with 2 examples of different color and sizing. Jun 9 at 7:49
2

Since we already have solutions for dotted grids and full line grids, for the sake of completeness, here's a dashed grid solution (dotted or single is also possible). Just adjust the CSS variables for your needs.

Here's a fiddle: https://jsfiddle.net/0nt7v9bj/

.dashed-grid-paper {

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

  background-color: var(--paper-color);
  background-size: var(--grid-dash) var(--grid-dash), var(--grid-size) var(--grid-size);
  background-image:
    linear-gradient(to bottom, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)), 
    linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)),
    linear-gradient(to right, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)),
    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>

To get a dotted version change the CSS variables like so:

--grid-dash: 1px;
--grid-gap: 5px;

To get a single line version change the CSS variables like so:

--grid-dash: 1px;
--grid-gap: 1px;
1

If you want to get the extra bolder lines of real graph paper and don't mind using ::before and ::after you can do this:

   body {
        position: relative;
        border-radius: 0 !important;
        background-color: #ecefff;
        background-size: 0.5rem 0.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
        margin: 0;
    }
    body::before, body::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-size: 2.5rem 2.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
        z-index: -1;
    }
    body::after {
        background-size: 5rem 5rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
    }

   body {
        position: relative;
        border-radius: 0 !important;
        background-color: #ecefff;
        background-size: 0.5rem 0.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
        margin: 0;
    }
    body::before, body::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-size: 2.5rem 2.5rem;
        background-position:0.25rem 0.25rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
        z-index: -1;
    }
    body::after {
        background-size: 5rem 5rem;
        background-image:
            linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
    }

Example in Chrome in fancybox

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.