Clipping Paths with clip-path

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%);
}

Radius

Type

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%);
}

Radius

Position X

Position Y

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%);
}

Radius X

Radius Y

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%);
}

Radius X

Radius Y

Position X

Position Y

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);
}

Top

Right

Bottom

Left

Type

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);
}

Top

Right

Bottom

Left

Border Radius

Type

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%)
}

X 1

Y 1

X 2

Y 2

X 3

Y 3

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);
}

SVG Id

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%);
    }
}

Start Radius

End Radius

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%);
    }
}

Animation Duration

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.