Skip to main
Video
Firefox Developer Tools

Edit CSS Shapes in the Browser

For quick visual adjustments directly on the page

Have you ever wanted to create more interesting shapes on the web, or flow text around the details of an image? Shape paths can be hard to code without a visual reference, but Firefox provides a shape editor to make it quick and clear.

CSS provides a number of built-in shapes we can use – from inset boxes to circles, ellipses, and polygons. I’ll show you how to use the tool to inspect, edit, and create shapes directly in the browser.

Use the shape path editor to create and adjust shapes on the fly!

Resources:

Shape Demos shown: