Toggle common print-CSS rules and watch a clean @media print stylesheet build itself live. Copy it straight into your project.
Assemble a tidy print stylesheet from proven, reusable rules instead of writing @media print from scratch every time.
Turn each print rule on or off and see the code block update instantly.
Rename the hide-class, tune the page margin and set a base print font size.
Grab the finished @media print block with one click, ready to paste into your CSS file.
Most websites are designed exclusively for screens, so printing a typical page wastes ink on navigation bars, ads, buttons and background colors that add nothing on paper. The CSS @media print at-rule lets you write styles that only apply when a page is sent to a printer or exported as a PDF via the browser's print dialog, without touching how the page looks on screen at all. A good print stylesheet typically strips away anything interactive or purely decorative, forces high-contrast black text on a white background to save ink and maximize legibility, keeps meaningful information like link destinations visible even without color or underlines, and prevents cards, tables or list items from being awkwardly split across a page boundary. This generator wires up all of these proven patterns as simple toggles, so you can produce a solid starting stylesheet in seconds and then hand-tune it further for your specific layout.
@page controls printer-level properties like page margins, independent of the normal document flow.
This property tells the printer not to split a given box across two pages whenever it can be avoided.
Many browsers skip background colors and images by default when printing; forcing black text on white guarantees readable output regardless.
The CSS content property can pull an element's own attribute value, which is how link URLs get printed after the visible text.
It is a set of CSS rules wrapped in an @media print block that only applies when a page is printed or exported to PDF via print, letting you hide navigation, adjust colors and control page breaks for a cleaner printout.
Interactive elements like navigation menus, buttons and footers are usually meaningless on paper, so hiding them keeps the printed page focused on the actual content.
On paper a link's underline and color are invisible cues, so appending the actual href in parentheses after each link's text keeps that information available on the printed page.
Yes. Use the custom selector field to rename the default .no-print class to any class name that matches your project's existing conventions.
Keep your codebase clean with these free online formatting tools.