The CSS property clip-path allows you to define a visible region of an element. Anything inside the region is visible but anything outside is hidden. There are numerous ways to define a clip-path clipping region like with circle() and using SVGs.

Currently, there is some browser support for clip-path. A -webkit- prefix is required for some browsers. Sadly, it seems that the IE and Edge browsers do not support it yet. https://caniuse.com/#search=clip-path.

Lets jump into the playground.

Circle

circle() defines a circular clipping region on the element. Providing a single length value (percent, px, em) places the circle in the center.

Clip Path

.content { -webkit-clip-path: circle(0%); clip-path: circle(0%); }

The position of the circle can be specified as well. As an example, circle(20% at 30% 70%) means the circle starts 30% from the left and 70% from the top.

Clip Path

.content { -webkit-clip-path: circle(0% at 50% 50%); clip-path: circle(0% at 50% 50%); }

Ellipse

ellipse() defines a elliptical circular clipping area. It accepts 2 length values which represent its horizontal radius and vertical radius respectively.

Clip Path

.content { -webkit-clip-path: ellipse(20% 70%); clip-path: ellipse(20% 70%); }

Like circle() an ellipse starting position can be specified.

Clip Path

.content { -webkit-clip-path: ellipse(40% 10% at 50% 50%); clip-path: ellipse(40% 10% at 50% 50%); }

Inset

inset() defines an inset rectangle clipping area. It takes 4 different values which represent its top, right, bottom and left side offsets. The widget below describes it better.

Clip Path

.content { -webkit-clip-path: inset(5px 5px 5px 5px); clip-path: inset(5px 5px 5px 5px); }

Interestingly, a border radius can be applied to the inset rectangle by specifying its roundness. An example like inset(5px 5px 5px 5px round 50px) creates an inset rectangle with a border radius of 50px.

Clip Path

.content { -webkit-clip-path: inset(5px 5px 5px 5px round 10px); clip-path: inset(5px 5px 5px 5px round 10px); }

Polygon

polygon() lets you choose a series of points to define a clipping area shape. Points are defined as comma separated sequences of X and Y coordinates. The example below draws a simple editable triangle.

Clip Path

.content { -webkit-clip-path: polygon(33% 33%, 33% 66%, 66% 66%); clip-path: polygon(33% 33%, 33% 66%, 66% 66%) }

If you’re looking for a cool tool to make polygon() clip paths, I’ve come across this useful clip path maker tool https://bennettfeely.com/clippy/.

SVG’s with clip-path

Before, we used just simple shapes to create a clipping path. SVG’s can be used as well. With the use of the url() CSS function, a clipping path element can the selected from a svg clipPath. I have a few example SVG’s in the HTML of this playground.

Clip Path

.content { -webkit-clip-path: url(#heart); clip-path: url(#heart); }

Animating Clip Paths

clip-path works wonderfully with CSS animations. Below are some examples of animating clip paths. The first one has a growing and shrinking circle().

Clip Path

.content { animation: clip 1.2s ease-in-out infinite alternate; } @keyframes clip { 0% { -webkit-clip-path: circle(20%); clip-path: circle(20%); } 100% { -webkit-clip-path: circle(40%); clip-path: circle(40%); } }

Here is another example with animating polygon().

Clip Path

.content { -webkit-clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%); clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%); animation: clip 3s ease-in-out infinite; } @keyframes clip { 25% { -webkit-clip-path: polygon(35% 15%, 65% 15%, 75% 85%, 25% 85%); clip-path: polygon(35% 15%, 65% 15%, 75% 85%, 25% 85%); } 50% { -webkit-clip-path: polygon(20% 30%, 40% 10%, 80% 70%, 60% 90%); clip-path: polygon(20% 30%, 40% 10%, 80% 70%, 60% 90%); } 75% { -webkit-clip-path: polygon(60% 10%, 80% 40%, 40% 90%, 20% 70%); clip-path: polygon(60% 10%, 80% 40%, 40% 90%, 20% 70%); } }

Yeah, I know it’s pretty unreadable. When you animate clip-path using polygon(), each individual polygon point is animated individually each keyframe. This gives animating polygon() a ton of power and flexibility for any type of shape.

Conclusion

clip-path is a great way of selectively displaying parts of an element. There are many simple shapes like circle() and inset() but the polygon() function allows for complex shapes. With the knowledge I gained while making this playground, I can imagine some fancy website home page designs using clip-path. I hope you enjoyed this as much as I did making this playground.

HTML
CSS
Output