text-shadow and box-shadow while printing (Chrome)

I realise this is an old question, but just to note that it is possible to make shadows print correctly in Chrome. You need to set both -webkit-print-color-adjust and a filter, as found in this bug thread: https://code.google.com/p/chromium/issues/detail?id=174583

.thing {    -webkit-print-color-adjust:exact;    -webkit-filter:opacity(1);}

(I prefer to set opacity rather than blur as used in the bug, simply because it seems likely to cause fewer problems).

Note that this will limit the resolution of the print (filter makes it send a rasterised version), so text might become harder to read. If you really want to work around that, I'd suggest duplicating the div (one for the shadow, with the filter hack and transparent text, and another for the text with no shadow)

Here is the solution:

@media print {  .item {    -webkit-filter: drop-shadow(4px 4px 1px #ccc);    text-shadow: 4px 4px 1px #ccc;  }}

I used all the possible solutions to this but the border shadow(with stepped gradient) would show up on my page, but not when I do a Ctrl+P on the page and either- print the page or save as PDF. I even used-

-webkit-print-color-adjust:exact;-webkit-filter:opacity(1);

I do the same Ctrl+P on this page- https://css-tricks.com/examples/BodyBorder/kottke.php and it works fine.

Solution: I had to remove the bootstrap.css included at the top of my page for the border shadow to show up on my PDF, or when I print the page.

<link href="/lib/bootstrap-3.2.0/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" >