no gradient showing in extract panel

[Lindsey Nagle]

I created a layout in Photoshop cc 2017 using a gradient fill in a rectangular selection. When I upload the file to my Creative Cloud account, and then use Extract in Dreamweaver, the file shows up in the Extract panel but the gradient swatch does not show up in the Styles section under Gradients (or anywhere). If I click on the gradient-filled rectangle, it seems to be treated as a div with width and height being the only available CSS to copy.

Aaaargh! What's up with this? How do I get my gradient to show up in the extract panel? It looks so cool in the tutorial where the gradient CSS for Webkit, Moz, etc gets automatically added to the CSS, but it's not happening for me and I didn't see anywhere in the tutorial how this was accomplished.

[Nancy OShea]

I don't use the Extract Panel.  For me it makes more sense to build my own HTML & CSS (or more accurately SASS/LESS) code directly in DW.   That said, I use ColorZilla's  online gradient generator.  Some fills like radial are not supported by all browsers.   So be sure test your work in different devices.

Ultimate CSS Gradient Generator - ColorZilla.com

Hope that helps.Nancy

[Nancy OShea]

Oh,  and one other thing.  Design View cannot render advanced CSS.   You won't see gradients unless you switch to Live View.

Nancy

[Lindsey Nagle · Accepted solution]

OK, so I downloaded the tutorial, opened it in Photoshop and compared it to the file I had created. Turns out that in order for the gradient swatch to show up in the Extract panel, the rectangle (or whatever) must be created as a shape, not pixels.

Hope this helps anyone having the same problem. Not obvious at all and I could find info basically NOWHERE on the web.

Thanks to Nancy for your input, but it wasn't exactly what I was looking for.