Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations CSS Gradients Repeating Gradients

CJ Williams
CJ Williams
34,372 Points

Generate CSS gradients with Photoshop CC

This is just a tip for creating simple gradients. In Photoshop CC, we are now able to draw out vector shapes with gradients, then right click on the layer and simply copy CSS. This will output the gradients with vendor prefixes, as well as some values that can be omitted, such as position, offsets, width height and z-index.

This could be a great time saver to mention in a video. I think those out there with a Photoshop workflow could greatly benefit from this. Cheers!

Very useful feature, thanks!!!

CJ Williams
CJ Williams
34,372 Points

A great tool, if you are using the 'Generate' features of photoshop to prototype websites is the Oven plugin. I highly recommend checking that out. It could potentially save a ton of time on tedious tasks, like generating retina&non-retina images all at the same time.