CSS Print Stylesheet Generator
Generate @media print CSS to control how pages look when printed. Hide elements, set margins, fonts.
Page Setup: A4 (portrait)Margin: 2cmFont Size: 12ptHidden Elements: 4 rulesFile Size: 925 chars
Presets:
Hide Elements
Link Options
Page Setup
CSS Output
CSS Print Stylesheet Generator
Generate a complete @media print CSS block to control how your web pages look when printed. Toggle options to hide navigation, sidebars, ads, videos, and other non-essential elements. Configure page size, orientation, margins, and typography. The option to show URLs after links ensures printed pages remain useful even without internet access.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Hiding navigation and adverts so a printed page carries only the content.
- Setting page margins for a document users will print.
- Making link URLs visible in print, where a hyperlink is otherwise lost.
- Controlling page breaks so a table does not split awkwardly.
- Producing a print stylesheet for a page that currently has none.
Frequently Asked Questions
- How does a print stylesheet get applied?
- Through `@media print`, which the browser uses when rendering to paper or PDF and ignores on screen. Rules inside it can hide navigation, expand collapsed content and reset colours without affecting the on-screen page at all.
- What should be hidden when printing?
- Navigation, search boxes, cookie banners, share buttons, video embeds and anything else that cannot be interacted with on paper. Ads and sticky headers are the two that most often survive by accident and consume the top of every printed page.
- How do I stop a heading being orphaned at a page break?
- `break-after: avoid` on the heading, plus `break-inside: avoid` on figures and tables that should stay whole. `orphans` and `widows` control how many lines of a paragraph may be left behind, and both default to 2 in most browsers.
- Can I print the URL behind a link?
- Yes: `a[href^="http"]::after { content: " (" attr(href) ")"; }` appends the address in the printed output. Restricting it to external links keeps the page readable — expanding every internal anchor produces more noise than information.
- Why do backgrounds disappear when printing?
- Because browsers omit background colours and images by default to save ink. `print-color-adjust: exact` requests otherwise, but the user's own print dialog setting overrides it — so a design that depends on a background colour for contrast will be unreadable on paper.
Common errors and gotchas
- Never testing in a real print preview, which is the only way to see the result.
- Hiding elements that carried necessary context along with the chrome.
- Using colours and backgrounds that most printers will not render.
- Forgetting `break-inside` on tables and figures, which then split across pages.
- Assuming screen layout translates, when print has fixed page width and no scrolling.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.