Edit your CSS Shapes with the Shape Path Editor

Have you ever wanted to create more interesting shapes on the web, or flow text around the details of an image? CSS provides a number of built-in shapes we can use – from inset boxes to circles, ellipses, and polygons. Shape paths can be hard to code without a visual reference, but Firefox provides a shape editor to make it quick and clear. Miriam Suzanne will show you how to use the tool to inspect, edit, and create shapes directly in the browser.

https://developer.mozilla.org/en-US/d...

http://www.widehive.com/artists

https://www.miriamsuzanne.com/2019/10...

https://codepen.io/stacy/full/449546e...

https://codepen.io/stacy/full/zjOeWa

https://adobe-webplatform.github.io/D...

https://bennettfeely.com/clippy/

https://labs.jensimmons.com/#shapes

https://codepen.io/stacy/full/aWKerN

Discover the best of web development

Sign up for the Mozilla Developer Newsletter