Clip-Path Playground
A little UI for experimenting with and generating curves as CSS clip-path values using the shape() function.
Generate code as a Tailwind class, CSS, or a computed SVG. Use it for rounded corner cutouts or button addons as an alternative to masks.
Here are some examples:
bob.fyi
Copied!
Item 1
Resources
- Clippy, a CSS Clip-Path Generator by Bennett Feely
- Modern CSS Round-Out Tabs by Chris Coyier
- Better CSS Shapes Using shape() — Part 1: Lines and Arcs from CSS Tricks
- An Interactive Guide to SVG Paths and Dynamic Bézier Curves by Josh Comeau