Firefox clip-path editor


How to find and use the Firefox clip-path editor

27 Dec, 2020 · 1 min read

Something my default browser Chrome doesn’t have is a fantastic clip-path editor. Something Firefox does come with, and it can be super helpful to guide you through making cool shapes with clip-path CSS.

The tool can create new clip paths from scratch or modify existing ones.

It looks like this:

Using Firefox clip-path editor

Firefox clip-path editor

To find the clip-path editor, we have to open the developer tools:

  • Mac: Shift + + J
  • Windows/Linux: Shift + CTRL + J

Then you can inspect an element with a clip path and click the little square image. This will highlight the clipping points on your element.

Firefox finding the clip-path editor

Firefox adding a new clip-path

The editor can not only edit existing clip paths but also create ones from scratch, which can be helpful!

To do so, click the element and add the clip-path code to it.

As you can see, generating or modifying a clip-path can be super helpful.

Let’s hope Chrome decides to build this in soon!

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Firefox dev tools - Animations

1 Jan, 2021 · 2 min read

Firefox dev tools - Animations

I wrote 1000 articles, what’s next?

22 Dec, 2022 · 3 min read

I wrote 1000 articles, what’s next?

Join 2099 devs and subscribe to my newsletter