What is clippy?

Clippy is a visual tool that helps you create fancy shapes and masks for elements on your website using CSS clip-path, a web standard feature that lets you hide parts of an element or reveal it in custom shapes. Instead of relying on images or complex workarounds, you can use clip-path to turn a rectangular button into a polygon, create a custom hero image border, or mask content into a circle, star, or any polygon you can draw. The problem is that writing the clip-path code by hand is tedious, you need to specify precise coordinates for each point of your shape. Clippy solves this by letting you draw or adjust your shape visually and then automatically generates the correct CSS code you can paste into your website. You'd use Clippy if you're designing a website and want to add geometric flair without relying on pre-made images or JavaScript libraries. A designer might use it to create a triangular cutout on a banner, a product manager building a landing page might want asymmetrical shapes for visual interest, or a front-end developer might need quick clip-path syntax without doing math by hand. The live version at bennettfeely.com/clippy is the actual tool, you visit it, draw or select a shape, tweak it until it looks right, and copy the generated CSS code. One thing worth noting is that clip-path support varies across browsers. The README points to caniuse.com for current browser compatibility, so you'll want to check if your audience's browsers support it before relying on it as a core design feature. For modern browsers, though, it works great and is faster and more flexible than image-based solutions.