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

Question

I'm making some printable calendar website using HTML, CSS and JS.

Unfortunately I cannot use CSS property called text-shadow, because shadow behind text prints as solid black text without any blur or transparency.

Same problem occurs when I'm trying to use box-shadow for any div - shadow prints like solid black color with no transparency.

I'm using Chrome with style html {-webkit-print-color-adjust: exact;} to ensure all background colors will be printed.

Any workaround? I would prefer not to use any background image.

Edit: I don't want to hide shadows, it's very easy of course. I want to have shadows printed correctly.

Best bet would probably be to remove the text/box shadows in your print stylesheet. — Billy Moat, Dec 20 '12 at 15:20
Of course I can do that, but I want to have them on my printout. Sorry if I didn't express enough clear — hogancool, Dec 20 '12 at 15:25
Hmmm, folks are usually wanting to remove them, so I had the same thought as @BillyMoat. This might be a limitation of print drivers, etc...but I'll be curious to see if anyone knows more. — Anson, Dec 20 '12 at 15:29
Yes, printer limitations seems to be one possibility, but maybe there is some "magic" attribute to enable printing those shadows. — hogancool, Dec 20 '12 at 15:31
Assuming you hit a dead-end with text-shadow printing, you could generate an image from the HTML on the server-side since printing an image should be fine. Of course, that's a lot of work for an effect ;-) — Anson, Dec 20 '12 at 15:39

score 28 · Answer 1 · answered Jan 15 '14 at 13:47

28

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)

answered Jan 15 '14 at 13:47

Dave

44,275
12
65
105

1

Wow this is an awful bug... Shadowed header becomes unusably low quality – Louis Maddox Apr 22 '15 at 01:00
1

Apparently it also changes shadow color to the color of the text. – Tigran Saluev Sep 25 '15 at 13:27
2

As of Chrome 46 adding a filter causes the text to be horribly pixelated. There is no current workaround for this in Chrome as far as I am aware – davidelrizzo Dec 24 '15 at 13:24
@davidelrizzo yes that was the case when I found this too. It's a pity, but see my last paragraph for a possible workaround in some situations. – Dave Dec 24 '15 at 17:56
I have the same problem today.. what will be the answear today? this won´t work for me! – Björn C Sep 04 '17 at 07:23
See my answer below for how to avoid rasterizing the content of the element when it's printed (https://stackoverflow.com/a/57714709/200508) – Cassidy Laidlaw Aug 29 '19 at 16:54
`-webkit-filter:opacity(1);` causes links not clickable on PDFs for unknow reason. I changed it to `-webkit-filter: blur(0);` and everything works fine. – Trantor Liu Nov 17 '20 at 02:10
Using `-webkit-filter: blur(0);` and `text-shadow: none;` (to help get rid of blurred text) together with @Dave's answer is what worked best for me. – Uzay Macar Apr 17 '23 at 00:08

score 2 · Answer 2 · answered Nov 07 '15 at 10:48

2

Here is the solution:

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

answered Nov 07 '15 at 10:48

Nazar Vynnytskyi

4,647
2
21
22

@Dave's fix did not work for me, this one does. Apparently the bug will finally be fixed in version 61 of Chrome. – Martijn Jul 24 '17 at 15:07
1

I am on version 62, this is still a problem, and this fix also did not work. – Travis J Oct 31 '17 at 20:56
This lets my chrome go for a preview load up forever. – Jamshaid K. Feb 27 '20 at 20:25

score 2 · Answer 3 · answered Jan 22 '19 at 18:11

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" >

this worked for me, but why is that that bootstrap causing it? — Resfe, Aug 07 '23 at 10:23

score 2 · Answer 4 · answered Aug 29 '19 at 16:53

If anyone is looking for a way to avoid rasterizing the content of the element with a box-shadow, this is what I used (extended from @Dave's answer):

.thing {
    position: relative;
}

.thing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: /* define your shadow here, not in .thing */;
    -webkit-print-color-adjust: exact;
    -webkit-filter: opacity(1);
}

This creates a pseudo-element at the beginning of the element you want to have a shadow. The pseudo-element is sized the same as the parent and then the drop shadow is applied to it only. That way, the drop shadow can be rasterized while the rest of the content of the parent is not.

There are a few issues if you have borders, if your element doesn't support children, etc. but this works in most cases.

score 1 · Answer 5 · answered Nov 17 '20 at 02:08

1

I tried

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

But it causes links on PDF non-clickable for unknown reason.

After I change it to the css below, both shadow and link problems are solved.

.thing {
    -webkit-print-color-adjust: exact;
    -webkit-filter: blur(0);
}

answered Nov 17 '20 at 02:08

Trantor Liu

8,770
8
44
64

1

Can confirm that this solved the issue in my case. Thanks! – Hari Mahadevan Mar 20 '23 at 09:57

score -1 · Answer 6 · answered Dec 20 '12 at 15:24

You don't need to compromise your web page to make it look pretty printed. Simply define a print.css that makes the printed view suit your needs.

# index.html
<head>
  <link href="/css/print.css" media="print" rel="stylesheet" type="text/css" /> 
</head>

# print.css
.shadow {
  text-shadow: none;
}

For more, Smashing Magazine has a helpful article on How To Set Up A Print Style Sheet.

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

6 Answers6

Linked