CSS Shapes Editor

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

Requires Opera 24+

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.

Polygons:
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.