Overview
Interactive editor for CSS Shapes.
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
Tanmay DwivediJun 4, 2021
Very useful..especially the clip-path..I highly recommend people to watch video before using it.
Kelsey MacPhersonMay 15, 2021
Couldn't figure out how to use it. Checked Dev Tools -> Elements and I see nothing new about shapes.
Soczek v2Oct 18, 2020
Great tool, thanks :D
Details
- Version1.3.0
- UpdatedMay 21, 2015
- Offered byRazvan Caliman
- Size84.76KiB
- LanguagesEnglish (United States)
- Developer
Email
razvan.caliman+dev@gmail.com - Non-traderThis developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.