Read the Blog Post
Clip Path CSS Generator
![Clip Path CSS Generator](/_next/image?url=%2Fassets%2Fclip-path-demo-2.jpg&w=1200&q=75)
triangle
![Animation preview](/_next/image?url=%2Fassets%2Fclip-path-demo-2.jpg&w=256&q=75)
Demo background
Toggle outside clip-path
About Clip Paths
The clip-path
property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.
Browser Support
Check out the current browser support for the clip-path
property on Can I Use.