Does Photoshop CC produce CSS for gradients?


Question

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 complex CSS for the gradient.

Is this a limitation of Photoshop CC or is there a way to get the actual CSS needed to create the gradient.

1
2
8/11/2014 4:21:00 PM

Accepted Answer

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:

  1. Dragged out a shape using the rectangle tool
  2. Applied a gradient overlay
  3. With the layer selected, go to Layer > Copy CSS
  4. 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 http://www.colorzilla.com/gradient-editor/ for a better cross-browser solution.

4
8/11/2014 9:08:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^