CSS Shapes Editor

SUMMARY

Create and adjust CSS Shapes values with an interactive editor overlapping the selected element. Update 21 May 2015: --- For polygons, unit-less zero coordinates will inherit the non-zero sibling coordinate unit instead of defaulting to pixels. Example 0 100% => 0% 100% Shapes sidebar: New sidebar to the DevTools Elements panel called "Shapes" which 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 points to remove them. 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. Update History === Update 13 Jan 2015: --- Provides workaround for Chrome 40+ regression which causes editor to fail when selecting an element to edit. Update 8 Dec 2014: --- This extension has been wrongly accused of spreading malware. It does not. Its source code is always available for inspection: https://github.com/oslego/chrome-css-shapes-editor The latest release (Version 1.2.0) addresses some potential vulnerabilities exploitable by 3rd party malicious scripts. If you experience malicious behavior from your browser, reset your browser settings: https://support.google.com/chrome/answer/3296214

The latest version of CSS Shapes Editor is available on the Chrome web and is currently being used by 10,000 active users. The initial version was launched on 2015-05-21.

HOW TO INSTALL CSS Shapes Editor FROM A CRX FILE

1. Download CSS Shapes Editor CRX file
2. NOTE: Sometimes the browser may block downloading / installing CRX file from outside the Chrome Web Store. If so, you may need to download the ZIP file instead
3. In the URL bar, go to chrome://extensions
4. Enable Developer mode

Ratings

USER REVIEWS (0)