: Does Photoshop CC produce CSS for gradients? Photoshop CC allows exporting CSS. When I try this with a gradient layer, the whole thing is basically an image. I was thinking it would produce

@Vandalay110

I just tried this myself and it does appear to export the CSS needed for the gradient (plus all the other styles needed to create your shape).

The steps I took were as follows:


Dragged out a shape using the rectangle tool
Applied a gradient overlay
With the layer selected, go to Layer > Copy CSS
Pasted the code into DreamWeaver (or any editor) and it looked like this:




.Rectangle_7 {
background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
position: absolute;
left: 33px;
top: 159px;
width: 166px;
height: 201px;
z-index: 21;
}




The only CSS you need for gradients will look something like this:

background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(255,255,255) 100%);


The rest of the styles are used for the element's size, position, etc.
Personally, I plan out my gradients in Photoshop and then carry them over to www.colorzilla.com/gradient-editor/ for a better cross-browser solution.

Vote Up Vote Down