{"id":8246,"date":"2026-01-13T13:15:14","date_gmt":"2026-01-13T18:15:14","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8246"},"modified":"2026-01-13T13:15:15","modified_gmt":"2026-01-13T18:15:15","slug":"simulating-crop-marks","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/simulating-crop-marks\/","title":{"rendered":"Simulating Crop Marks"},"content":{"rendered":"\n

This is weird, but: I had a dream where I was thinking about crop marks. What are crop marks? They were pretty damn important in my print design and digital prepress days. Designers would hang parts of the design off the edge of the document<\/em> and the expectation is that the ink literally goes to the edge of the paper when printed. Printers can’t actually print to the edge of the paper though (it would be messy!) so instead, the use a little bit bigger paper<\/em>, crop marks<\/strong> are added, and the design is printed a bit outside the crop marks. Then the final piece is literally cut<\/em> at those marks, making the design hit the edges as intended.<\/p>\n\n\n\n

Design software like InDesign can output files destined for printing this way with these marks. <\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

Then the PDF will be a bit bigger than the designed sheet size and have these marks:<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

Imagine thousands of printed pages like this all stacked up. The print shop binderies I worked at would have big ol’ cutter machines that would cut the stack of paper right at the crop marks.<\/em> That’s the point of the crop marks, literally knowing exactly where to cut the paper. <\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n
\n

Have you ever heard the term “bleed”<\/strong> in web design? <\/p>\n\n\n\n

For example…<\/summary>\n
\"\"<\/figure>\n\n\n\n

<\/p>\n<\/details>\n\n\n\n

This comes directly from print design. It’s the area outside<\/em> the crop marks. When a part of design has bleed<\/em> it means there are elements of the design that are pulled out into the area that gets cut away. So on the web that means an element of the design touches the edge of the viewport.<\/p>\n<\/div><\/div>\n\n\n\n

\"Diagram<\/figure>\n\n\n\n

In my dream I was thinking about how they looked and how I could add them to a website, just for the aesthetics of it. Could be a worse dream, I guess. It was strong enough of a dream that I woke up and actually felt compelled to do it.<\/p>\n\n\n\n

Crop Marks on the Web<\/h2>\n\n\n\n

To be clear, there is no reason to do this on the web. I’m just thinking it’s a neat print design throwback and aesthetic thing. Like color bars or registration marks. <\/p>\n\n\n\n

The trick is that there are eight<\/em> of these little lines. Certainly, we could add eight <div><\/code>s to the page and fix position them and that would do it. But my head always says: this is entirely<\/em> a visual design thing that has nothing to do with the content of the page. So don’t clutter the HTML!<\/p>\n\n\n\n

We can get four<\/em> elements “for free” on any given page without touching any HTML:<\/p>\n\n\n

html<\/span>::before<\/span> {}\nhtml<\/span>::after<\/span> {}\nbody<\/span>::before<\/span> {}\nbody<\/span>::after<\/span> {}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
So if we’re able to draw two marks with each of those, we should be able to pull this off. Let’s start by drawing boxes. <\/p>\n\n\n\n
We can position a “bar” on each edge like so:<\/p>\n\n\n\n