CSS Shapes Editor for Chrome

31 AUG 2014 - LONDON

CSS Shapes allow web designers to wrap content around custom paths, but authoring them is not trivial.

None of the traditional tools used in web design currently export code for CSS Shapes and the syntax conversion workflow is unwieldy and time-consuming. It wouldn't help too much even if they did. CSS Shapes are meant to be used in the browser context where it's easy to see how they interact with other elements on the page in various configurations. The shape authoring process should capitalize on this affordance, something external editing tools are not well equipped to do.

To solve this problem, I released the CSS Shapes Editor for Chrome. It is a Developer Tools extension which provides an interactive editor for shape property values like circle(), ellipse() and polygon().