Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

CSS Shapes Editor for Chrome DevTools

Chrome DevTools extension for live on-screen editing of CSS Shapes property values. Uses the CSS Shape Editor library.



How to install


Google Chrome

  1. Open Google Chrome (min version 37, check chrome://version/)
  2. Install extension from Chrome Web Store

Opera browser

  1. Open Opera (min version 24, check opera://about)
  2. Install extension from Opera add-ons registry.

From source

  1. Clone this repository.
  2. Open Google Chrome (min version 37, check chrome://version/ or download Canary)
  • Navigate to chrome://extensions
  • Toggle on "Developer mode" checkbox
  • Click "Load unpacked extension"
  • Select the cloned repository folder

How to use

  • Launch DevTools (View > Develop > Developer Tools)
  • Switch to Elements panel
  • Look for the new Shapes sidebar next to Styles, Event Listeners, etc.
  • In the Shapes sidebar:
    • click "create" and select a shape type to add
      • an interactive editor appears on top of the selected element
    • click "edit" to turn on editor and adjust an existing shape
    • click "edit" again to remove the editor
    • tip: hold the Shift key and click "edit" to convert the shape coordinate units

Sample content

Use with the CSS Shapes Espresso demo (source), or learn how to create your own sample.

Known limitations

  • Manually editing code in the Shapes sidebar, like in Styles, is not yet available.
  • There is no interactive editor for inset() shape function. Only polygon(), circle() and ellipse() are supported.