Skip to content

CSS Shapes Editor is now on the Chrome App Store

Updated: at 03:19 PM

You know how magazine layouts often wrap text around non-square pictures? It is now possible in CSS3 and Chrome has a plugin that will create the CSS code for you.

Interactive editor for CSS Shapes.

Create and adjust CSS Shapes values with an interactive editor overlapping the selected element.

Requires Chrome 37+

Shapes sidebar:

The extension adds a new sidebar to the DevTools Elements panel called “Shapes”. It offers controls to create and edit CSS Shapes values like polygon(), circle() and ellipse() on the selected element.


Click the edges of the shape to add new points. Drag points to change the shape. Double-click an existing point to remove it. Select the transform tool to move, scale and rotate the polygon shape.

Circles & ellipses:

Drag the shape to move it around. Pull on the edges and corners to scale and resize.

Read more from the source: