Crop marks are an idea that comes from the print design world. Design in the bleed area will be cut away by giant cutter machines, and that bleed area is designated by the crop marks. We can do it on the web too, just for kicks.

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

Crop marks from print design can be recreated on the web using CSS pseudo-elements (::before and ::after on html and body). By positioning four pseudo-elements and using linear-gradient() with hard color stops, you can draw eight small lines at the corners of the viewport without adding extra HTML. The technique demonstrates how to create visual design elements that mimic print aesthetics, using the "bleed" area concept where design extends to viewport edges.

Simulating Crop Marks – Frontend Masters Blog