How it renders / box-shadow
Why box shadows do not appear in the PDF
Shadows are backgrounds as far as print optimisation is concerned, so they are dropped along with background colours unless backgrounds are enabled.
What it is for
A card design that depends on shadows for its separation becomes a set of unbounded text blocks when they vanish, which is why this is noticed as a layout problem rather than a colour one.
Support: Works in a browser-based render
Renders, since backgrounds are painted by default here. Large blurred shadows are expensive to rasterise and add meaningfully to file size on a document with many of them.
The syntax
Written the way it would appear in a document stylesheet, using box-shadow as intended.
/* Shadows need backgrounds on, like everything else decorative. */
/* On by default. Only an explicit print_background of false disables it. */
/* For a document, a border is usually the better separator: it survives any
print setting, costs nothing to render, and reads better on paper. */
.card {
border: 1px solid #e3ded2;
border-radius: 3px;
}The mistake people make
Relying on shadow alone to separate elements. On paper, and in any render with backgrounds off, the separation is simply not there.
Frequently asked
Does box-shadow work when generating a PDF?
Works in a browser-based render. Renders, since backgrounds are painted by default here. Large blurred shadows are expensive to rasterise and add meaningfully to file size on a document with many of them.
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.