Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

CSS Toolkit is a Mac app for designing elements. It has a beautifully clean interface. You’ll find yourself creating beautiful things in a just a few clicks. It’s certainly easier than firing up Photoshop just to play with getting a gradient just right, or exploring some different type.

Best of all for all use CodePen users, flip over to the code view, and you’ll see the exact code required to create what you built. Copy and paste it, or click the CodePen icon to create a new Pen with the code already there!

The other is Clippy, a browser app by Bennett Feely for building your own custom clipping paths for elements. It uses the CSS3 property clip-path (learn more).

It’s wonderfully designed, giving you lots of useful polygon shapes to start with and the ability to drag the points around to get exactly what you want.

Another win for us CodePen users, there is a CodePen logo right there you can click to jump the exact work you just did over to CodePen! This is already a super cool and useful tool, and I suspect will see lots more use once Firefox and IE start supporting this property (which they will, it’s standards track).

They both use our open prefilling API, just in case you have your own ideas cooking!