How it renders / opacity and mix-blend-mode
Do opacity and blend modes work in a PDF
Opacity works and produces real transparency in the output. Blend modes are composited during rendering, which means the result is correct and the layering information is gone.
What it is for
It matters for watermarks. A watermark at low opacity is genuinely part of the page rather than something a viewer can toggle, which is usually the intent.
Support: Works in a browser-based render
Both are honoured. An element with opacity creates a stacking context, which can change what sits above what, and that surprise shows up more often in a document than on a page because documents overlap less by default.
The syntax
Written the way it would appear in a document stylesheet, using opacity and mix-blend-mode as intended.
.watermark {
color: #000;
opacity: 0.06;
/* Behind the content: needs the content to establish its own stacking. */
z-index: 0;
}
.document > *:not(.watermark) {
position: relative;
z-index: 1;
}The mistake people make
Very low opacity text, which can disappear entirely on a printer even though it is visible on screen. Below about four percent, test on paper before shipping it.
Frequently asked
Does opacity and mix-blend-mode work when generating a PDF?
Works in a browser-based render. Both are honoured. An element with opacity creates a stacking context, which can change what sits above what, and that surprise shows up more often in a document than on a page because documents overlap less by default.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to force background colours to print
print-color-adjust. Works in a browser-based render.
Does @media print apply when generating a PDF
@media print. Works everywhere.
How to stop a PDF rendering in dark mode
prefers-color-scheme. Works everywhere.
Why position: fixed behaves strangely in a PDF
position: fixed. Works in a browser-based render.
Why images look blurry in the PDF
image-rendering. Works everywhere.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.