1

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.

  • Css3 PS - Free. Css Hat - Not free, but excellent plugin. Exports to Less, among other things. Png Hat - Not free. Combination of Css Hat and Enigma64. So it essentially combines css export and image export. Ultimate Gradient editor - Free. This one has nothing to do with photoshop, but it allows picture import and css import. – Joonas Aug 11 '14 at 16:33
  • Not sure how any of that answers the question. – 4thSpace Aug 11 '14 at 16:38
  • I probably just misunderstood the question then. – Joonas Aug 11 '14 at 17:35
3

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.

  • ah. I think that is where I was going wrong. I was drawing a gradient on a layer. In this case, it would just create an image in the CSS. But if I draw a shape, then select blending options and apply the gradient that way, I get the full CSS. Is that what you are doing? – 4thSpace Aug 12 '14 at 3:13
  • Yep, that's it exactly. This was my first test at extracting CSS from PS so I'm not sure if there are any other ways of doing it or how complex the elements can be, but it sure is pretty awesome. – jjsears6 Aug 13 '14 at 12:43
  • What does it mean "Dragged out a shape using the rectangle tool"? Could you please explain it – Green Sep 29 '14 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.