This is an archived forum post. The information may be outdated. Contact us if you have any questions.

CSS3 support

dlrust wrote on 2011-06-02:

Hello,

Is there any resource I can check out that lists which CSS attribute can't be used with pdfcrowd?

I noticed that some styles are not being applied (i.e. box-shadow and linear gradients as backgrounds)

Thanks

support wrote on 2011-06-02:

Hello,

we don't have a comprehensive list, sorry. The simplest way to test if a CSS3 attribute is supported is to visit this page, paste an HTML/CSS3 code snippet there and check the generated PDF.

dlrust wrote on 2011-06-02:

Thanks. I am trying to create some CSS gradients on elements.

I used this tool to create the gradients that are not working currently in my pages: http://www.colorzilla.com/gradient-editor/

But if I use the "convert webpage" on the tool itself (http://www.colorzilla.com/gradient-editor/). It seems to render the left gradient successfully into the pdf. Is there any way to tell what CSS selector actually worked during conversion to set the gradient in the PDF?

support wrote on 2011-06-02:

Please, use -webkit-gradient

<head>                                                                                                                                                                                                                                                                         
  <style>                                                                                                                                                                                                                                                                      
    .grad {                                                                                                                                                                                                                                                                    
      width:150px; height:150px; border:2px solid black;                                                                                                                                                                                                                       
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));                                                                                                         
    }                                                                                                                                                                                                                                                                          
  </style>                                                                                                                                                                                                                                                                     
</head>                                                                                                                                                                                                                                                                        
<body>                                                                                                                                                                                                                                                                         
  <div class="grad">  </div>                                                                                                                                                                                                                                                   
</body>

dlrust wrote on 2011-06-02:

Thanks. That seems to work.

It looks like the "border" is required for this to work?

Works

<head>                                                                                                                                                                                                                                                                         
  <style>                                                                                                                                                                                                                                                                      
    .grad {                                                                                                                                                                                                                                                                    
      border:1px solid black;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));                                                                                                         
    }                                                                                                                                                                                                                                                                          
  </style>                                                                                                                                                                                                                                                                     
</head>                                                                                                                                                                                                                                                                        
<body>                                                                                                                                                                                                                                                                         
  <div class="grad">Testing</div>                                                                                                                                                                                                                                                   
</body>

Doesn't work

<head>                                                                                                                                                                                                                                                                         
  <style>                                                                                                                                                                                                                                                                      
    .grad {                                                                                                                                                                                                                                                                    
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));                                                                                                         
    }                                                                                                                                                                                                                                                                          
  </style>                                                                                                                                                                                                                                                                     
</head>                                                                                                                                                                                                                                                                        
<body>                                                                                                                                                                                                                                                                         
  <div class="grad">Testing</div>                                                                                                                                                                                                                                                   
</body>

support wrote on 2011-06-02:

Good catch, this looks like a bug on our end, we will look into it. Thanks for reporting back.

dlrust wrote on 2011-06-02:

Thanks for the support.

This is a great tool. Just signed up for an API subscription

support wrote on 2011-06-02:

Thanks for subscribing!

bringshare wrote on 2012-07-26:

Hi,

This bug seems to be open still. Any chance we could get this checked out?

Thanks-
Andrew@Bringshare

support wrote on 2012-07-27:

Andrew, yes this issue is still not resolved. We will take a closer look at it and get back to you.