5

I am using wkhtmltoimage to render a snapshot for my website which contains a background gradient but it doesn't show up in the generated snapshot.

I tried using on Ubuntu and Windows but am not able to find the error.

I even tried using the simplest command without any parameters.

wkhtmltoimage.exe <website_link> <image_name>

My original page looks same in all major browsers Here is the screen printenter image description here

And here is the one generated by wkhtmltoimage enter image description here

I am not sure what exactly is the problem. I tried looking at their existing issues as well but couldn't find anything.

Community
  • 1
  • 1
Kshitiz
  • 2,852
  • 5
  • 32
  • 41

2 Answers2

2

Did you check your gradient syntax. wkhtmltopdf uses the webkit syntax. 

  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgb(64,128,176)),color-stop(100%,rgb(1,73,129)));
  background:linear-gradient(to bottom,rgb(64,128,176) 0%,rgb(1,73,129) 100%);

The second syntax will not count to wkhtmltopdf but the first one works for the version of wkhtmltopdf I have (0.10.0 rc2).

I also found that modern webkit syntax doesn't work. i.e. this didn't work 

background: -webkit-linear-gradient(top, #ccc 0%, #888 100%);

As per this : stackoverflow entry

Community
  • 1
  • 1
Interlated
  • 5,108
  • 6
  • 48
  • 79
  • 2
    It took me a while to get how the old format is for a radial gradient: `background: -webkit-radial-gradient(#fff 5%, #8dcae4 15%, #00a8d7 60%);` – gdvalderrama Jun 05 '18 at 10:43
2

As as 0.12.2.1 of wkhtmltopdf the gradient css - either old or new doesn't work.

Interlated
  • 5,108
  • 6
  • 48
  • 79
  • I'm observing the same. I get a gradient, but it's almost as if it's repeating and not in a way that's predictable. – rainabba Feb 04 '16 at 00:21