CSS Shapes Editor
Interactive editor for CSS Shapes.
What is CSS Shapes Editor?
CSS Shapes Editor is a versatile Chrome extension that allows designers and developers to conveniently create and adjust CSS Shapes values within a live editor overlapping the selected HTML element. In addition to polygons, this tool also supports circles and ellipses, which can be easily moved, scaled, and resized. It provides a seamless and interactive approach to web design, enhancing efficiency and effectiveness.
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 summary
- Useful for creating and editing CSS shapes
- Can save time during development
- Clip-path feature is particularly helpful
- Offers extra tips and tutorials on the author's blog
- Unreliable and may not work consistently
- Some users have trouble understanding how to use it
- Integration with dev tools is not clear
- Limited options and functionality
- Not working
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.
CSS Shapes Editor has earned a fairly good reputation and likely can be trusted.
Here are some Chrome extensions that are similar to CSS Shapes Editor: