Generator Tools

CSS Print Stylesheet Generator

Build a CSS print stylesheet with @page size, margins, hidden nav, link URL inlining, page breaks, and print-color-adjust. Live preview, no signup.

Quick presets

Open print sample opens a new tab with a small HTML document, inlines the CSS above, and triggers the browser print dialog so you can verify margins, page breaks, hidden navigation, and link URLs before shipping the rules.

Paper and margins

Paper sizeOrientation

Margin unit

TopRightBottomLeft

Body and color

Body font size (pt)Line height

print-color-adjust

exact forces backgrounds and colors to print; economy is the browser default for content; auto leaves it to the user agent.

Force black text on whiteSets body color to #000 and background to #fff for maximum ink contrast.Remove box and text shadowsAdds * { box-shadow: none !important; text-shadow: none !important; }.Underline linksAdds text-decoration: underline; to every anchor.Inline link URLs after anchorsAdds a::after { content: " (" attr(href) ")"; } for http(s) links.Inline image alt textAdds img[alt]::after { content: " [" attr(alt) "]"; } so readers see what the image was.Expand main content to full page widthResets width, max-width, margin, padding, and float on the main selectors.

Main content selector(s)

Hide on print

One selector per line, or comma-separated. Hidden with display: none !important.

Page breaks

Break before

Break after

Avoid break insideAdds break-inside: avoid (modern) plus page-break-inside: avoid (legacy). Useful for tables, figures, code blocks, and headings that should stay with their next paragraph.

OrphansWidows

Output options

Wrap rules in @media printWithout this, the rules apply on screen too. Useful for testing.Include @page ruleEmits size and margin in an @page block. Browsers ignore @page inside @media.Include legacy fallbacksEmits page-break-* alongside the modern break-* properties.

Output CSS

@page {
  size: A4 portrait;
  margin: 20mm 15mm 20mm 15mm;
}

@media print {
  body {
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
    background: #fff;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  nav,
    header,
    footer,
    aside,
    .sidebar,
    .ads,
    .cookie-banner,
    .skip-link,
    button,
    .no-print {
    display: none !important;
  }

  main,
    article,
    .content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
  }

  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a, a:visited {
    color: #000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
    word-break: break-all;
  }

  h1,
    h2,
    h3,
    table,
    figure,
    pre,
    blockquote {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  p, blockquote, li {
    orphans: 3;
    widows: 3;
  }
}

Paste the rules into your global CSS or your component stylesheet. The browser only applies them when the user (or your code) calls window.print() or the user picks Print from the menu.

Print layout preview

Approximated: the box below uses the same selectors and rules as the @media print block so you can sanity check hidden chrome and full-width content. Page breaks and exact paper margins only show in the real print dialog (use Open print sample above).

How browsers handle print

Print stylesheets let you hand the printer a clean layout. Hide navigation, expand the article to the full width of the page, switch to dark ink on white paper, and force a break before each section so chapters do not split awkwardly.

Inline link URLs after the anchor text so readers can find the original source on paper: see the source article for the full discussion. Tables and figures use break-inside: avoid so they stay together.

A second heading

One short bullet of context.
Another bullet, lightly indented.

What the rules do

@page size and margins: size accepts paper keywords (A4, A5, Letter, Legal, Tabloid) plus portrait or landscape, or a width and height with a unit. Margins use the standard top, right, bottom, left order. @page only applies inside the print context, so on-screen layout is unaffected.
print-color-adjust: exact forces the browser to render every background color, image, and gradient on paper, even though most browsers strip them by default to save ink. economy is the default. The -webkit- prefix ships alongside the unprefixed property for Safari.
Hidden selectors: The hide list collapses nav, header, footer, sidebars, cookie banners, share widgets, and any element you tag .no-print. The !important wins over component styles without you having to touch the markup.
Inlining link URLs: a[href^="http"]::after appends the URL after every absolute link so the printed copy still tells the reader where the source is. Relative anchors and mailto: links are skipped to keep paper clean.
Page break properties: break-before and break-after force a new page; break-inside: avoid keeps tables, figures, code blocks, and headings together. The legacy page-break-* counterparts ship in the same block so older WebKit and print engines pick the right value.
Orphans and widows: orphans is the minimum number of lines left at the bottom of a page; widows is the minimum left at the top. Three is the CSS-wide default; four reads better for long reports.

How to use

Start from a preset (Blog article, Invoice, Long report, Receipt, or Landscape slides) or build from scratch using the defaults.
Pick the paper size, orientation, margin unit, and per-side margins. Custom paper sizes accept width and height in mm, cm, or inches.
Tune the body for paper: font size in points, line height, force black text on white, and pick the print-color-adjust mode (auto, exact, economy).
Edit the hide list to collapse nav, header, footer, sidebars, banners, buttons, and any element you tag .no-print. Use commas or new lines.
Toggle Inline link URLs after anchors to append the href after every absolute link so the printed copy still has the source.
Configure page breaks: force break-before for h1 or .chapter, break-after for .section-end, and break-inside: avoid for tables and figures.
Click Open print sample to write a real HTML document with the CSS inlined into a new tab and trigger the browser print dialog for verification.
Click Copy CSS to grab the rules and paste them into your global stylesheet or component CSS.

About this tool

CSS Print Stylesheet Generator builds a copy-ready @media print block (and an optional @page rule) for any HTML page. Pick a paper size (A4, A5, US Letter, US Legal, US Tabloid, or a custom width and height), pick portrait or landscape, set top, right, bottom, and left margins in mm, cm, or inches, and the generator emits a standards-compliant @page declaration. Tune the body for paper: set the body font size in points, a print-friendly line height, switch text to pure black on white for maximum ink contrast, and pick the print-color-adjust mode (auto, exact, economy) so backgrounds and gradients either survive the print or get stripped to save ink, with the -webkit-print-color-adjust fallback shipped automatically for Safari and older Chromium. Hide site chrome with a single comma- or newline-separated list of selectors: nav, header, footer, sidebars, cookie banners, share widgets, buttons, and any class you tag .no-print collapse with display: none !important so component styles cannot win the cascade. Expand the article to the full width of the page by resetting width, max-width, margin, padding, position, and float on a configurable main / article / .content selector list. Inline the URL after every absolute link with an a[href^="http"]::after rule (relative anchors and mailto: links are skipped to keep paper clean), and optionally inline image alt text so readers see what every figure was supposed to show. Control page breaks the way print engines actually expect: force break-before: page (with the legacy page-break-before: always fallback) on h1, .chapter, or any selector you choose; force break-after: page on section ends; and keep tables, figures, code blocks, and headings together with break-inside: avoid plus the page-break-inside: avoid fallback. Set orphans and widows to keep stray lines from stranding at the top or bottom of a page. The live preview applies the same rules to a sample article inside a paper-shaped box so you can sanity-check hidden chrome and link inlining, and the Open print sample button writes a real HTML document with the CSS inlined into a new tab and triggers the browser print dialog so you can confirm @page margins, paper size, and page breaks in the actual print preview before pasting the CSS into production. Five presets cover the most common search intents: a blog article layout, a tight invoice layout, a long report with break before every chapter, an 80 mm thermal receipt roll, and landscape slides at one slide per page. Everything runs in your browser; the selectors, settings, and sample content never leave your device.

Free to use. Works in your browser. No signup, no login.

Related tools

CSS Print Stylesheet Generator

How browsers handle print

A second heading

What the rules do

How to use

About this tool

You may also like

CSS Media Query Generator

CSS Formatter

CSS Clamp Generator

Viewport Size Tester

Yearly Calendar Generator

Graph Paper Generator