wkhtmltoimage CSS3 gradient rendering in Snapshots

Question

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

Answer 1

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

Answer 2

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