CSS Shapes Editor
Interactive editor for CSS Shapes.
What is CSS Shapes Editor?
Stats
Chrome-Stats Rank
Other platforms
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.
User reviews
User reviews summary
Pros
- Useful tool
- Saves time
- Has extra functionalities like clip-path, shape-outside
Cons
- Unreliable
- Difficult to figure out how to use
- May cause issues with some website displays
- Lack of support for editing values in the console and adjusting values in CSS
- Tagged as Malware
Most mentioned
- Issues with using it
- Recommendation to watch instructional videos or read blog posts for help
- Potential Malware
Recent reviews
Safety
Risk impact
CSS Shapes Editor may not be safe to use and it requires some risky permissions. Exercise caution when installing this extension. Review carefully before installing.
Risk likelihood
CSS Shapes Editor has earned a fairly good reputation and likely can be trusted.
Promo video
Screenshots
Promo images
Similar extensions
Here are some Chrome extensions that are similar to CSS Shapes Editor: