CSS Clip Path Generator

CSS Clip Path Generator

Image is loading...
Triangle
Path Shape
Width: 400px
    Height: 400px
      10015 Tools
      +

      Get “Online Tools” browser extension!

      Access all tools powered by 10015.io with just one click

      What is Online CSS Clip Path Generator?

      CSS Clip Path Generator is a free online tool for generating CSS clip path for masking your images. "clip-path" is a CSS propery for restricting the boundries of an image by predefined rules. It gives you flexibility to obtain image masks just by using CSS. You can obtain image background transparency with JPG file type partially with this feature without using PNG and make an indirect image optimization.

      There are 4 different clip-path types, polygon, circle, ellipse and inset. Most widely used CSS clip-path type is polygon. You can put as much dots as you want to obtain a polygon and this shape will be used as a reference to you image mask. There are many geometric polygon shapes are available in the tool to use as a template to obtain the desired clip-path. They are varying from simple geometric shapes to more complex structures.

      CSS clip-path property can be used for different purposes. It is mostly used in landing page and hero images as image mask. Also you can use clip-path to shape your section seperators. It is a common trick to use CSS clip-path to obtain diagonal section seperators.

      Here is an artistic image that is clipped with CSS clip-path. It looks more aesthetic than the raw image in your UI (user interface) design and webpages for most cases and it's a relatively low cost operation.

      Clipped image with rhombus-shaped CSS clip-path
      Clipped image with rhombus-shaped CSS clip-path

      How to use Online CSS Clip Path Generator?

      You can generate CSS clip-path code with the help of the instructions below.

      1. Select the shape you want to use as a template for your clip-path.
      2. You can either use placeholder images or your own background image by setting its URL.
      3. You can change the width and height of the preview image. Be careful, since clip-path coordinates are given in percentage, aspect ratio of the image is more important than the width and the height.
      4. Move the dots to change the path as you need by dragging them. When you get the desired result, you can use "Hide the guides" option to see the final result.
      5. If you get the desired clip-path, you can copy the CSS code to your clipboard and paste into your web project.