Getting thirds lines and intersections in pixels
The rule of thirds divides a frame into three columns and three rows and uses those lines as reference. Eyeballing the positions drifts, and whatever you feed a design tool guide or a CSS overlay has to be a number in pixels. Enter the canvas width and height and the page returns the x of both vertical lines, the y of both horizontal lines, the coordinates of all four intersections, and the size of a single cell.
The arithmetic is a plain division into thirds: vertical lines land at one third and two thirds of the width, horizontal lines at one third and two thirds of the height, and the intersections are those four combinations. Values display to two decimals while the calculation itself stays unrounded until the moment of display. The overlay CSS draws the lines with repeating linear gradients, so it can be pasted onto an element as is. Checked against CSS syntax current in October 2026.
This page calculates coordinates only. It does not suggest which intersection should hold your subject or your call to action, because there is no recognized standard saying one of them works better, and photography, web screens and print all use the idea differently. Golden ratio splits and diagonal composition are out of scope, and safe-area or inner-margin calculations are not supported.
Frequently Asked Questions
When the width or height does not divide evenly by three you get decimals. A browser paints the line at a rounded pixel, so the drawn position can sit about one pixel off the calculated value.
The page gives coordinates and does not recommend placement. No recognized standard ranks the four intersections, so the choice depends on your content and reading direction.
Yes. It is a set of declarations that draw the lines with repeating linear gradients, so they drop into an element style or a class. Recalculate and copy again whenever the canvas size changes.