Add Grid To Image

This is a simple tool that will add a grid overlay to any image. This can be great for drawing if you want to break a larger image up into smaller portions. Use a larger grid size and thickness if the image is large and not rendering correctly.

Apply Grid To Image Reset Image

Grid Scale Decimal places accepted
Grid Thickness Decimal place accepted
Grid Color Hex color codes
Image Format



Select the image format from the dropdown to save an exact copy of the image in the window to your device.

I built this tool to add a grid to an image file and kept it super basic. If anyone has some additional requirements they would like added to this tool to make it more useful, please let me know and I will see what I can get done. I am not an artist, so I am not sure what people might use this for. For me, it was a simple case of adding some squares to an image so I could break up the contents of the picture to make it easier to draw the same image on paper. Hopefully this tool is as useful for you as it was for me.

Suggest a New Tool! – If anyone has the need for a free and handy online tool like this one, feel free to reach out and It may be something I can build and add to this site, please let me know using this contact form.

Related Articles

Related Questions

Function Keys Reversing Between Fn Actions And Normal

My keyboard has the usual F1 to F12 keys along the top. I use these for shortcuts in various applications. These keys also have...

Whirlpool Oven F6E6: Appliance Manager 1 Board Communication

I have a brand new Whirlpool oven W11I OM1 4MS2 H or (859991549450). I bought it alongside the microwave combi oven. I have had...

Whats the difference between the Tapo P100 and the P105?

There are a few different Tapo smart plugs. The P100 and P110 differ based on the smart power monitoring feature but where does the...


  1. Hola, kind sir. Thank you for the tool. As far as use cases go, I use it to add a grid onto an image of a textured build plate for my 3D printer. This enables a quick sanity check on model scaling with sub-mm level accuracy, quickly and intuitively – . Thank you.

    A couple feature Requests:

    1) add an option to offset the origin of the grid by some pixel count
    2) add options to bound grid generation, respecting origin and size

    Thanks Again.


  2. Thanks for this grid tool Dan. Everything else I’ve tried to date has been too complicated. I use it to draw accurately and I like the square grid pattern. However I wonder if it ‘s possible to change the size of the squares using metric measurements, e.g. to create a grid of say 1 cm squares? That way I could use my gridded photo reference (using your grid) to draw the image onto graph paper, which already has 1cm squares printed on it. I could also then enlarge the image to 2 or 3 times the size accurately. The drawing on the graph paper then would enable me to transfer the drawing onto my good paper.

    • It can be tricky converting pixels to cm since it depends on the users screen resolution. For example, a high definition 4k screen may have 500 pixels over 5cm but a 1080p screen of the same size would have the same number of pixels over 10cm. You could then have a monitor twice the size but also 1080p and 500 pixels would be 20cm. So it is not possible to use metric measurements in this way

  3. Hey Dan! Love this tool. I do agree that in the next version a manual input of how many squares across/down would be very useful. I’m trying to divide a pixelart image into more clearly defined squares, and I know it is 25×25. It would be very helpful to be able to tell the app this, instead of guess and checking with the grid scale currently offered

  4. Hi Dan, I’ll be using this to add grids to images for D&D rpg combats….
    I’m not sure I understand what the “grid scale” value means?
    If I wanted a grid of say, 40×20 squares over an image, what’s the grid scale for that?
    I guess I’m trying to understand the math here, does it go based on the image resolution we upload? How do you control the number of squares the grid generates?

    • The tool is only designed to make a grid of squares. If the aspect ratio of the image is 2:1, you should be able to configure the slider to create what you are looking for. I have had others ask for a grid that is not squares, it is something i am hoping to add to a v2 of this tool

  5. Thanks! This is just what I needed to plan out a garden design. I took an image of the existing landscape using Google Earth and then added the grid lines with your grid tool.


  7. Just a followup, as I saw one of your comments – by squash and stretch it doesn’t mean make the literal grid-lines width & height being different, it means the option to change the shape of the overall grids (from squares to rectangles). This would mean that your grid may be wider than it is tall, but the actual lines are all the same height and width pixels.

  8. Grid Thickness doesn’t work in my browser. I prefer – 1 but, there is 5 and i can’t change it 🙁 Does anyone has the same problem?

    • Thanks for reporting this. I have found the cause and fixed the issue. It was only impacting images larger than 1500 pixels wide. It should be working correctly now.

  9. I have just pushed another update for this tool. I have removed the scale slider and instead, this is now an input that you can modify to 1 decimal place e.g. 10.1. This should solve the issues some of you are having to try to get the grid to line up perfectly as the slider did not allow perfectly precise values. The new field will make this much easier.

    I have seen the suggestion of wanting the grid width and height being something you can configure. This is possible but I am not sure this would be much good. A grid is made of squares, if you have a grid of 5px high and 3px wide, it will mean the grid is wonky and will make it more difficult to render cleanly. Sure, it will mean you get a perfect grid from top to bottom and left to right, something that is hard with a square grid due to aspect ratios not always being perfect multiples but this feels like a feature that would make the tool far more difficult to configure. I will keep it in mind and if it is something more people want, I can consider adding it.

  10. is all good with the tool? it doesnt make equidistant grid (squares) but differences between lines are different for me now

  11. Thank you! I’ve tried another website tool and it was overly complicated for a grid. This was much easier! My only suggestion, and maybe it’s just I don’t know how to do it..
    My tracing grid I set up for drawing is basic Imperial 0.5″ squares for 8.5*11 paper. Can I somehow set my grid here to match?

  12. i am a artist, i make portrait of people so few weeks i was search for website that we can insert image of what we want and we can draw using grid method so it makes drawing easy and better. the best of all is we can save the image and it is totally free.

  13. Love the adjustable grid! Was just embarking on this project, but you have already done it! One small request. I’d like a less dense grid at the maximum point. Any way you could make the range larger? Maybe have it be non linear at the coarse end?

    Thanks for this!!

  14. Hi, it is a wonderful tool. I have one suggestion for you, you should incorporate to set user’s reference distance, as a grid pixels. Like 1mm or 2mm in your image will be 25 pixels in the grid. That reference will be set by the user,

  15. I saw that you’re updating this tool. I am gridding a geological outcrop and matching it with scale. To do this I am trying to get the grid size and position to line up exactly on the scale of the image i am processing. Lots of manual work. I ended up using GIMP (free photoshop software), however their overlay is kind of unfortunate so a lot of screen capture was used.
    If you really want some feedback ideas for this awesome public service I would recommend the following features:
    1) Decimal grid scale
    2) Grid shift in X & Y axis
    3) Manual input of these features (not just a scroll bar)
    Thanks for working on this! It would be very beneficial for many people working with photography, mapping, drawing, or extraneous digitizing purposes such as mine.

  16. Hey guys, I have just updated the tool to support decimal places in the grid thickness. I know some of you wanted to go below 1 or just wanted 1.5. If you enter a value with a decimal place, it will update once you hit enter or just move out of the input and it will apply to the image right away.

    I have also updated the grid scale to up to 300px. Up from 200px as this was another suggestion.

    I have been reading over the other suggestions such as being able to set a number of rows and making the tool do the math with the scale. Shouldn’t be a problem but my worry is that if I start adding too many features like this, the tool will stop being the basic and simple tool it is now. I am thinking I may create an advanced grid tool and keep this one as is. The advanced tool will have all of the features you guys are asking for without sacrificing the simplicity of this one.

    Feel free to drop any other suggestions you guys have. If there are any other useful tools you guys would like to see me build, be it for art or anything else, please let me know. I am happy to work on some new stuff if there is a need for it.

  17. You’re the best! so easy and very cool website design so Professional! i think it will be more better if Grid Thickness is counted to .5 i want more thin and this grid tool have no like 20×25 like that feature i mean its only px scale by the way super thanks!

  18. I just wanted to say Thank you, This website has been so helpful. I am using it to help me draw Portraits better and it has helped me so much.! 🙂

  19. Would love to see grid thickness drop below 1 feel a little bit thick and it can be hard to see through to the image itself. Otherwise, extremely helpful for D&D battlemaps. Thanks for putting this out here for us to use!

    • Hey Tyler, glad the tool is useful. I have just implemented a change that allows grid thickness to have a decimal place. You can now enter 0.5 or 0.1 into the box and once you click out of the input, it will apply. Hope this helps

  20. works like a charm. I will use it to draw a portrait, so the grid helps getting the proportions more or less right…
    (…To improve it ? Maybe 2 colours instead of 1 ? So every 2nd line a different colour. But quite frankly, not sure it that would improve it…Different colours might distract.
    But..maybe the option to change the colour of the grid ? On a black and white photo a red grid maybe ? ) Just speculating. Great tool. Thank you for sharing.

  21. Would it be possible to have it so it’s a set number of elements on each axis instead of pixels between grid lines? Like say a 4 by 4 grid or a 10 by 15 grid?

  22. Thank you for this easy to use app! We don’t need to print it out and save on paper and ink — the reference can be viewed digitally!

  23. Can the grid lines be in colors or are they strictly within the black/white range? Also, provide a list of the 3-digit alpha codes in your very brief instructions. Or, better yet, create a drop-down box for the selection of grid line colors. I had no idea what color FFF was, so I started going the alphabet. Figured it out, but don’t want to do that every time.

  24. Thank you thank you thank you!!!!! I have to copy paintings for work and this tool is perfect for that and so quick and easy! Thank you a million more times!

  25. if you could “number” the grid, in X / Y coordinates, it would be perfect.
    Like from “left bottom” to “left top” ( 0, 1, 2, 3… N ) and from “bottom left” to “bottom right” ( 0, 1, 2, 3… N ), this tool would be amazing.

  26. This is super useful – thank you. The other online gridding tool I used to use has disappeared so I was delighted to find yours. I am just about to do a Youtube film about gridding, so I will point people in this direction (if I may??) Thanks! Liz

  27. Wow. This is great. So easy to use and so helpful. As a fitness trainer I use this as an overlay on photos of my clients so I have a reference for non-ideal posture and movement. Thanks!

  28. Thank you. This is exactly what I was looking for. The variable spacing and thicknesses of the lines are perfect. You have really helped this artist.

  29. thanks very much for this Dan. I have been using a different website up to now to get grids and they are no longer available. It would be useful if, as well as the slider to scale the grid, you could just say how many squares (across) you want, like 6, and it would do that for you.

    • Agreed, id have to work on the math for that. I think I may come up with a V2 of this tool that does a lot more advanced stuff. I would keep this tool live since it is the simple grid to image tool and then have an advanced one that is going to be more difficult to use but has way more options for advanced stuff

  30. I am a art teacher and used to use another webtool for grid drawing but it went offline and I had to find another one. Very nice tool.
    Can you make it possible to make the grid larger (more than 200px). Usually want like 7-10 squares only.

  31. Master, you did a good job! Congratulations!! A simple and easy to use application. It would have been exceptional if the rows of squares could have been numbered as a chessboard: A1, B2, C3 … Anyway, it is a useful thing for drawing. Thanks!

  32. it would be good if you could drag the grid to where you want it to be.. i use this to adapt a picture to a knitting pattern, so then it would be easier to get the colour where the stitches will be.. great tool

  33. I was going to write an app like this myself, but then I thought surely someone must have done this already :). So thanks. One suggestion that would really help me: let me choose the number of lines horizontally or vertically for the grid rather than choosing a pixel size. E.g. If I have a piece of paper 11 inches wide I would like to draw 10 lines at one inch intervals.

    • This is very difficult as an inch and a pixel aren’t comparable. 1 inch could be different depending on your device and screen resolution. I’d likely introduce so many bugs trying to do this and it would still not work correctly

  34. this is so cool! I do this everyday for my kids that are in primary school right now. They absolutely love doing this!!! Thank you so much for uploading this for me.

  35. I was making grid lines manually in Paint. So time consuming, this is amazing for someone just learning to draw by hand! I appreciate the “hacking” explanation. I practically navigate blind in the IT world and don’t know the first thing about Java, and was wondering whether I would be handing over the image or not.

  36. This is amazing- I print out a ton of maps for DnD, but lately the software I use doesn’t show the grid lines super well on paper. This has been a complete Godsend in fixing that issue!

  37. You could add a check button that overlays the image with a black image or like an inverse color of the grid color so that it would just show the grid.

  38. This was super useful for me as I began a dog portrait, a subject that primarily as a landscape artist, is way outside my comfort zone. I found the weight of the lines and colors of the lines particularly useful! Bravo for making such a simple to use tool available.

  39. This does not work properly for an iPad.
    Downloads as a ‘document’ with no extension.
    Had to rename and add extension, before it would work.
    Other than that all goods, thanks
    I.e…. image.png

    • What kind of question is this? First things first, you cant hack someone from uploading an image. Second, its a javascript based tool so my server doesn’t know a single thing about what you upload or do, it all happens in your web browser. Lastly, if this was some kind of sneaky plan for me to hack people, do you think someone would admit it because you asked?


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

AI Content Detector

We've got this awesome free tool that'll help you figure out if that content you're looking at was written by a human or some...

Image Saturation

Are you looking for an easy-to-use, free app to modify your image saturation levels and make your pictures truly pop? Look no further! Our...

Pixelate Image Tool

Introducing the ultimate free online image pixelator tool that allows you to easily transform your images into stunning pixel art in just a few...

Image RGB Level Adjustment Tool

Introducing the ultimate image color adjustment tool for all your photo editing needs. Our free online tool lets you take full control of your...

Image Color Inverter

Looking for a quick and efficient way to convert your images into negatives? Our Free Image to Negative Converter is the answer! Our online...

Negative Image to Color Image Converter

Welcome to our Negative Image to Color Image Converter, a free and easy-to-use tool that helps you convert your old negative images into vibrant,...

Latest Posts

Latest Questions