CSS Shape Path Editor extension for Chrome DevTools

The Firefox DevTools come with a built-in editor to manipulate CSS Shapes, as demonstrated by Miriam Suzanne in the video below.


For the Chromium-based browsers (Google Chrome, Microsoft Edge, …) the DevTools currently sport no such thing. Thankfully there’s an extension that can provide it for us. Once installed you’ll get an extra Shapes panel that lists all shapes. Clicking one will activate its edit mode.

Crazy to see this extension dates back to 2014 already! 😱

CSS Shapes Editor Chrome Extension →


🌟 I’ve filed Issue #1244072 over at the Chromium Bug Tracker to see this feature get built-int into the DevTools themselves. Star it if you would also like to see it.

Via Adam

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.