Add Grid To Image

This is a simple tool that will add a grid overlay to an image or photo. 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. Simply select an image file from your device and it will overlay a customizable grid onto the image for you to view and download. 

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

WordPress Table of Contents Plus Not Working

I have been using this plugin for a while and i really like it. It seems to have completely stopped working recently. I can...

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...


  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

List Sorting Tool

Welcome to our innovative list ordering and management tool. This next-level platform enables you to sort a list of items in ascending or descending...

Sudoku Solver

Welcome to our free online Sudoku solving tool, an interactive platform for puzzle enthusiasts seeking a break from a Sudoku conundrum. This advanced platform...

Apply Image Filters To Image

Digital imagery in the modern world is all about reinforcing emotions and stories behind each photo we take. To amplify this storytelling, we are...

Add Watermark To Image

As the world is increasingly consumed by digital media, protecting your original images is paramount. We are thrilled to introduce you to our innovative...

CSV To Xml Converter

Welcome to our CSV to XML converter tool, a convenient and user-friendly solution for all your data conversion needs. This versatile tool on our...

RGB Image Splitter

Welcome to our innovative RGB Splitter - a unique image analyzer tool that offers an in-depth peek into the building blocks of your photos....

Latest Posts

Latest Questions