How to crop an image with CSS (the simple way)

If you try a simple search for “crop image CSS”, you may quickly go down a rabbit hole of convoluted methods 😰, including wrapper <div>’s with overflow:hidden or wildly complex SVG PATH examples… but what if you simply want to crop an image by rectangle as you would with a GUI app like Gimp, or Photoshop?

How to crop an image with CSS?

What you probably need is: clip-path with the rectangular inset option.

Unlike some of the other approaches, this can even work with responsive images, as you can use percentage values for the inset. It also has pretty good browser support.

Here’s what it looks like:

clip-path: inset(top right bottom left);

So , for example — here’s that rabbit hole we wanted to avoid:

Image credit: Jin Zan

to crop 10% from all edges of the image, we simply use:

clip-path: inset(10% 10% 10% 10%);

Our rabbit hole now looks like:

Image credit: Jin Zan

That’s it!

If you have a better way — please let me know in the comments!