SKIP TO MAIN
Read the Blog Post

Clip Path CSS Generator

Clip Path CSS Generator

triangle

Animation preview
Animation preview: Hover/Click to see animation between original state and current state.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%)

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.

GET IN TOUCH

Let’s work together

I build exceptional and accessible digital experiences for the web

WRITE AN EMAIL